Javascript-форум - css3 transition background-image

Javascript-форум (https://javascript.ru/forum/)

- Оффтопик (https://javascript.ru/forum/offtopic/)

- - css3 transition background-image (https://javascript.ru/forum/offtopic/37271-css3-transition-background-image.html)

megaupload

13.04.2013 15:31

css3 transition background-image

У них что мозгов не хватило отрендерить 2 состояния до и после и сделать плавный переход между ними????

danik.js

13.04.2013 15:59

Да не говори. Меня еще бесит что не сделали display: none <-> block.
Было бы очень полезно для плавного скрытия/появления блоков.
А если серьезно - разве сейчас можно задавать транзишны для нечисловых свойств, например border-style, font-style ?
По сути то проблема в отсутствии возможности задавать прозрачность фоновым изображениям.

megaupload

13.04.2013 16:47

Хорошо, у нас 2 проблемы отсутствие возможности трансформировать 1 стиль в другой. так как вознкиает неодновзнчность как именно это сделать. ну например трансформировать градиент с 2 маркерами в градиент с 2 маркерами в другом месте, плавно перемещать маркеры или сделать просто замещение?

И вторая проблема это отсутствие возможности задавать прозрачность бэкграундам.

это ваще кто нить решает или нам самим взяться)?

Цитата:

Сообщение от danik.js

например border-style, font-style

почему ты сказал это с сарказмом, современные технологии СПОСОБЫ сделать это.

melky

13.04.2013 19:45

Цитата:

Сообщение от danik.js (Сообщение 245982)

учите CSS3 Animations котаны

megaupload

13.04.2013 19:55

Цитата:

Сообщение от melky

CSS3 Animations

есть 2 стиля к одному элементу, анимейшенс может сделать плавный переход от одного стиля к другому)???? а елси у них display разный элемент плавно перемещается на новое положение или исчезает если none?

не я серьезно, я примерно знаю там ключи анимации и.т.п. но разве это относится к теме?

9xakep

13.04.2013 22:20

megaupload,
да, фантастика, я сам в шоке был

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>

<body>
<style>
@-webkit-keyframes open {
	from {
		opacity: 0;
		top: -80px;
		left: -80px;	
	}
	to {
		opacity: 1;
		top: 0px;
		left: 0px;	
	}
}

.open_animation {

	-webkit-animation: open 2s;	
	
}

.hide_style {
	
	position: absolute;
	top: -80px;
	left: -80px;
	
}

.open_style {

	position: absolute;
	top: 0px;
	left: 0px;
	width: 80px;
	height: 80px;
	background:#C00;
	
}

input[type=button] {

	position: absolute;
	top: 90px;
		
}
</style>
<div class='hide_style' id='test'></div>
<input type='button' value='Показать' />
<script>
function changeClass(elem, class1, class2) {
	elem.className = elem.className.replace(class1, class2);
}
document.getElementsByTagName('input')[0].addEventListener('click', function () {
	
	changeClass(document.getElementById('test'), "hide_style", "open_style"); 
	
	document.getElementById('test').className += ' open_animation';
	
	setTimeout(function () {
		document.getElementById('test').className = document.getElementById('test').className.replace(" open_animation", "");
	}, 2000)
	
}, false)
</script>

</body>
</html>

Если ты про то конечно

9xakep

13.04.2013 22:45

Ух ты
megaupload,
смотри как можно

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>

<body>
<style>
@-webkit-keyframes open {
	from {
		background-image:url(http://s60.radikal.ru/i170/1304/bc/9b0397a202e9.png);
	}
	to {
		background-image: url(http://s017.radikal.ru/i401/1304/7a/b7f2e56b1b82.png);
	}
}

.open_animation {

	-webkit-animation: open 2s;	
	
}

.second {
	background-image: url(http://s017.radikal.ru/i401/1304/7a/b7f2e56b1b82.png);
	background-repeat: no-repeat;
	width: 100px;
	height: 65px;
}

.first {
	
	background-image:url(http://s60.radikal.ru/i170/1304/bc/9b0397a202e9.png);
	background-repeat:no-repeat;
	width: 100px;
	height: 65px;
	
}

</style>
<div class='first' id='test'></div>
<input type='button' value='Показать' />
<script>
function changeClass(elem, class1, class2) {
	elem.className = elem.className.replace(class1, class2);
}
document.getElementsByTagName('input')[0].addEventListener('click', function () {
	
	
	
	document.getElementById('test').className += ' open_animation';
	
	setTimeout(function () {
		document.getElementById('test').className = document.getElementById('test').className.replace(" open_animation", "");
		changeClass(document.getElementById('test'), "first", "second"); 
	}, 2000)
	
}, false)
</script>

</body>
</html>

9xakep

13.04.2013 22:48

Блин вот круто, как я сразу не догадался... а я такой быдлокод (уже получается) писал, что бы 2 картинки переключались

megaupload

13.04.2013 23:19

melky,
твоюю ж маааааааааааать О____________О

и чо это ОБЩЕИЗВЕСТНО?????????????????????????? ????????????????????77777777777777

я думал это просто обертка на transition !!!

я игрался с ней но не думал что там ТАКОЕ можно!!!!

megaupload

13.04.2013 23:49

ахиреть просто ахиреть пасоны!11

а у меня вопрос. и с этим косяком все сталкивались))

еслимы хотим сделать смены картинки при наведении и обратную смену ПРИ УБИРАНИИ нам надо на основной класс повесить анимацию "убирания" и получается что при заходе на сайт сработают все анимации убирания... как это КРАСИВО обходить?

melky

14.04.2013 00:25

Цитата:

Сообщение от megaupload (Сообщение 246060)

жди melAnim. там эти анимации можно на *** вертеть

Цитата:

Сообщение от megaupload (Сообщение 246069)

img:hover {
    animation-direction: reversed;
}

если я правильно понял

megaupload

14.04.2013 00:34

пасоны, я огорчен, только хром умеет менять картинку плавно..
почему люди из мозила не пристыдятся и не сделают это??????????????
это же дня 2 работы!

megaupload

14.04.2013 00:39

Цитата:

Сообщение от melky

если я правильно понял

нет

надо чтобы при уведении она в исходное состояние возвращалась.

сделай пожалуйста демо если это вообще возможно

сделай чтобы квадрат менял цвет а при увидении плавно менял цвет обратно

9xakep

14.04.2013 00:44

megaupload,
это с помощью transition делается

http://gmoryes.bplaced.net/testhover.html

megaupload

14.04.2013 00:45

Цитата:

Сообщение от 9xakep

это с помощью transition делается

сделай чтобы при наведении на квадрат менялся его фон а при убирании он менялся обратно.

9xakep

14.04.2013 00:49

megaupload,
тупой что ли

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
</head>

<body>
<style>

.but_into {

	width: 100px;
	height: 100px;
	background: black;
	-webkit-transition: background 0.5s ease; 	
	
}

.but_into:hover {
	background: red;
}
</style>



Наведи
<div class='but_into'></div>

megaupload

14.04.2013 00:58

Цитата:

Сообщение от 9xakep

тупой что ли

сделай чтобы на фоне была картинка а не цвет, пятушок

9xakep

14.04.2013 01:03

Цитата:

Сообщение от megaupload (Сообщение 246080)

ты просил цвет

ну с картинкой сам попробуй, потому что я спать уже

megaupload

14.04.2013 01:09

Цитата:

Сообщение от 9xakep

ты просил цвет

да, а еще я просил это анимейшеном сделать))
лол вот ты толстишь или реал затупил)?

9xakep

14.04.2013 01:19

Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.

megaupload

14.04.2013 10:02

Не, не надо снуля, сделай на основе этого :D
рукожопчик ты наш)

<!DOCTYPE>
<html>
<head>
<meta charset=utf-8">
<title>Документ без названия</title>
</head>

<body>
<style>

.but_into {

	width: 100px;
	height: 100px;
	background: black;
	-webkit-transition: background 0.5s ease; 	
	
}

.but_into:hover {
	background: red;
}
</style>



Наведи
<div class='but_into'></div>

melky

14.04.2013 11:22

Цитата:

Сообщение от megaupload (Сообщение 246080)

это ж изменение параметров анимации, когда она проигрывается. это запрещено спецификацией, так что сочувствую :(

по идее, нужно изменить параметр направления анимации (animation-durection) когда мышку отводят - это и есть изменение патаметров анимации

megaupload

14.04.2013 14:03

суть в том что css не учитывает современные потребности для оформления

должны добавиться тогда такие штуки как

::click

::mouseover

котрые бы и вызывали анимации

чтобы всю логику ОТОБРАЖЕНИЯ можно было бы написать в одном CSS

разве я не прав?

долее того css должен поддерживать все что поддерживает stylus вот это было бы ТО ЧТО НУЖНО.

но всем похуй

9xakep

14.04.2013 15:13

megaupload,
ага, как значит сам столкнулся с этим, так сразу: "нужен клик, нужно это"

Как я у тебя спрашивал: "зачем нужны эти события, это не логично"

megaupload

14.04.2013 16:40

Цитата:

Сообщение от 9xakep

ага, как значит сам столкнулся с этим, так сразу: "нужен клик, нужно это"

Как я у тебя спрашивал: "зачем нужны эти события, это не логично"

да, а теперь картинку пили пёс\

п.с. на самом деле ты даже не понял что я написал и зачем. если бы расчитывался транзишен между двумя абсолютно разными стилями то было бы норм. но добавляя АНИМАЦИИ нужно добавлять события и прочее. раз они добавляют логику то пусть уж делают это нормально.

melky

14.04.2013 21:25

Цитата:

Сообщение от megaupload

но добавляя АНИМАЦИИ нужно добавлять события и прочее. раз они добавляют логику то пусть уж делают это нормально.

события? animationstart, animationend.. они есть))

megaupload

14.04.2013 21:37

Цитата:

Сообщение от melky

animationstart, animationend.. они есть))

в css блин, оформление должно описываться в css

ПАСОНЫ откройте это в 7 ИШАКЕ

http://www.romancortes.com/blog/pure-css-coke-can

лол)

nerv_

15.04.2013 02:36

Цитата:

Сообщение от 9xakep

Ух ты
megaupload,
смотри как можно

америку открыл :)

megaupload

15.04.2013 12:26

давайте добавим поддержку динамического stylus в браузеры)?

события на дом мутейшен повесим и.т.п. не)?

реал ваще сделать?

kobezzza

15.04.2013 14:54

Цитата:

Сообщение от megaupload (Сообщение 246268)

Сделать реал, но придётся:
1) Переписать транслятор Stylus, т.к. для динамики он работает медленно (у меня в проекте преобразование стилевой таблицы ~ 3/4 сек а количество строк где то 10к), т.е. если делать это в реальном времени, то это объективно очень медленно, но если очень заморочиться, то можно сделать быстро.

2) Реализация должна быть максимально прозрачной, чтобы не усложнять разработку.

3) Не должно тормозить.

Если эти 3 пункта будут выполнятся, то это будет прикольная штука. Сделай и будет тебе крутое портфолио)

megaupload

15.04.2013 15:05

я пока рукожоп для этого, надо уметь писать парсеры строить синтаксически древа и.т.п. а я не могу(

сделаю просто игру на three.js на с движком typescript и меню на stylus
и мультиплеерностью на WebRTC

kobezzza

15.04.2013 15:07

Цитата:

Сообщение от megaupload (Сообщение 246313)

Я тоже не умел, пока не сел и начал писать:)

kobezzza

16.04.2013 21:57

Сегодня узнал о существовании CSS фреймворка от создателя Stylus, как я понял, что данный зверь живёт динамически с помощью JS на клиенте и осуществляет взаимодействие CSS c DOM. Пока нет времени поиграться, кто затестит напиши своё мнение :)

http://web-standards.ru/news/713/

megaupload

16.04.2013 22:25

Цитата:

Сообщение от kobezzza

зверь живёт динамически

с чего ты взял?

kobezzza

16.04.2013 22:29

Цитата:

Сообщение от megaupload (Сообщение 246561)

с чего ты взял?

Вскольз прочитал блог автора и сложилось такое впечатление, но мб я и не прав:)

Прост не понятно, зачем ему новый велосипед если он написал уже один:)

UPD: внимательно перечитал заметку автора, да, я ошибся - это просто новый велосипед, работа над ошибками. Основная фича - это максимальная возможность перегрузки параметров, чтобы писать "чистый CSS", предполагается использование с другими препроцессорами, такими как Stylus.

megaupload

16.04.2013 22:51

а я понял что это не динамика так как так было написано

npm install бла бла бла

or

<script src="блаблабла"></script>

)))

kobezzza

16.04.2013 22:52

Цитата:

Сообщение от megaupload (Сообщение 246574)

а я понял что это не динамика так как так было написано

npm install бла бла бла

or

<script src="блаблабла"></script>

)))

Каюсь, не ругай:)

megaupload

16.04.2013 23:11

kobezzza,
но я все ровно автоматически кончил как прочитал, так что спасибо))

kobezzza

16.04.2013 23:12

Цитата:

Сообщение от megaupload (Сообщение 246578)

kobezzza,
но я все ровно автоматически кончил как прочитал, так что спасибо))

Часовой пояс GMT +3, время: 03:18.