Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.05.2011, 22:05
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

управляемые css transitions
не так давно ( 2 дня назад ) начал постигать анимации через относительно недавно появившееся CSS-правило transition.


вся моя функция animate свелась к
  • добавлению правила в тег style ( sheet.addRule )
  • прописыванию "исключений" ( border-radius -> -moz-border-radius, heigth -> heigth ), т.е. обработка css правил.
  • а также удалению этих правил после анимации ( чтобы не загромождать стили ).


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

то есть, это :

<div class="anim">

             <img src="abc">  
             <img class="a" src="....."> 

             *!*<img class="a" src="ololo">*/!*     

</div>

селектор для подчеркнутой получается, например

DIV.anim IMG.a:nth-child(2)

знаки > и < не юзал. просто забыл про них





правда , одна проблемка.

к вам такой вопрос.

на w3org описаны свойства этих анимаций.

только не могу никак понять, как их использовать ?

я вроде с онглицким дружу, но не могу вникнуть

Цитата:
The initTransitionEvent method is used to initialize the value of a TransitionEvent created through the DocumentEvent interface. This method may only be called before the TransitionEvent has been dispatched via the dispatchEvent method, though it may be called multiple times during that phase if necessary. If called multiple times, the final invocation takes precedence.
из первого подчеркивания ясно, что будет событие и его надо будет отлавливать через addEventListener( 'transitionend', function(){} )

а второе... особенно интересует слово precedence. "приоритет" переводится.



UPD. как всегда, выручает мозилла док центр https://developer.mozilla.org/en/CSS/CSS_transitions

значит, еще ничего не реализовано?

Последний раз редактировалось melky, 04.05.2011 в 22:14.
Ответить с цитированием
  #2 (permalink)  
Старый 05.05.2011, 05:17
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

Можно попробовать использовать заранее подготовленные классы, добавляя их и удаляя можно довольно сложную анимацию сделать.
<style type = "text/css">
	#sample{
		-webkit-transition: 1s ease-in all;
		-moz-transition: 1s ease-in all;
		-ms-transition: 1s ease-in all;
		-o-transition: 1s ease-in all;
		transition: 1s ease-in all;
		width: 100px;
		height: 30px;
	}
	
	.change{
		color: red;
		background-color: green;
		border: 5px solid yellow;
		width: 200px !important;
		height: 100px !important;	
	}
	
</style>

<div id = "sample">hover me!</div>
<script type = "text/javascript">
window.onload = function(){
	var sample = document.getElementById("sample");
	
	sample.onmouseover = function(){
		this.className = "change";
		this.innerHTML = "click me!"
	}
	sample.onclick = function(){
		this.className = "";
		this.innerHTML = "hover me!";
	}
}
</script>

в css я установил длительность 1с, конец анимации можно отловить если засечь время от ее начала, а начало происходит по какому либо действию, что нибудь можно придумать
__________________
readOnly
Ответить с цитированием
  #3 (permalink)  
Старый 05.05.2011, 14:58
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

я уже придумал

и transition-property: all;, мне кажется, не годится

мы ведь не всё анимируем, а только указанное свойство?

ну да ладно

конец анимации можно отловить по событию transitionend. так написано на мозилла док центре ( ссылка в посте сверху )

у меня примерно так же все делается, за исключением предписания классов

код сам добавляет класс, где прописано конечное значение.

еще добавляет в тег style правила для указанного элемента.. правила перехода ( transition )

потом удаляет

...

там 2 проблемки... первая в мозилле : если не указать начальное значение, перехода не будет

т.е. , при таком коде

img { -moz-transition : height 1s linear; }

img.animate { height : 660px; }


если не задана высота картинки, она не будет анимироваться.

вторая проблема в хроме. там просто не удаляются правила ):
...
.......

я спрашивал про реализацию всего этого без прикосновений к тегу style

типа


// высота меняется мгновенно
element.style.height = "200px";

element.style.transitionProperty = "height";
element.style.transitionTime = "2s";
element.style.timingFunction = "linear";

// а вот  после этой строчки будет анимироваться
element.style.height = "660px";
Ответить с цитированием
  #4 (permalink)  
Старый 05.05.2011, 15:19
Аватар для poorking
prodigy
Отправить личное сообщение для poorking Посмотреть профиль Найти все сообщения от poorking
 
Регистрация: 01.11.2010
Сообщений: 503

Сообщение от melky
transition-property: all;, мне кажется, не годится

мы ведь не всё анимируем, а только указанное свойство?
Ну я просто пример привел...
Сообщение от melky
отловить по событию transitionend. так написано на мозилла док центре
А это событие везде генерируется где поддерживается transition?
Просто транзишн странно поодерживается пока что в FF4 например уже w3c transition, в 3.6 -moz-transition, хром новый уже тоже вроде поддерживает w3c без префикса -webkit, опера новая тоже стала поддерживать транзишн но со своим префиксом, и т.п. просто не знаю, вдруг с событием transitionend тоже у каждого что-то свое. Или оно вообще не везде еще появилось.
Сообщение от melky
я спрашивал про реализацию всего этого без прикосновений к тегу style
Ну тогда в elem.style.все равно придется прописывать кучу свойств для кроссбразерности, хотя так даже проще будет, написать функцию какую нибудь setTransition(elem, property, duration, trFunction, callBack) чем кучу классов менять
__________________
readOnly
Ответить с цитированием
  #5 (permalink)  
Старый 05.05.2011, 17:16
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от poorking Посмотреть сообщение
А это событие везде генерируется где поддерживается transition?
в 4 файрфоксе да.

в опере 10.5 это OTransitionEnd

в хроме webkitTransitionEnd

я про него ничего не нашел. попробовал сам.. "тыкнуть"

вот пример для вебкита, файрфокса и оперы



<img width="100" src="http://javascript.ru/forum/image.php?u=9861&dateline=1303740012" style="border : 3px red solid">

<script>
var img = document.images[0],

    // это для хрома
    transit = 'WebkitTransition',
    transit_event = 'webkitTransitionEnd';





if (typeof img.style.WebkitTransition === 'undefined') {


    if (typeof document.body.style.MozTransition === 'undefined') {

        if (typeof document.body.style.OTransition === 'undefined')

                        alert('Не поддерживается');

        else {

            // меняем для оперы
            transit = 'OTransition';
            transit_event = 'OTransitionEnd';

        }

    } else {

        // меняем для мозиллы
        transit = 'MozTransition';
        transit_event = 'transitionend';

    }




} // if webkit transition END


// свойство TRANSITION 
img.style[transit] = "all 2s ease-in-out"




// после 400 мсек меняем свойства и начинается анимация
setTimeout(function () {

    with(img.style) {

        width = "300px"
        opacity = "0.3";

    }

}, 400)


// в конце анимации мутим бесконечную
img.addEventListener(transit_event, function () {

    with(img.style) {

        width = Math.random() * 150 + 50 + 'px';


        opacity =  Math.random();

        borderWidth = Math.random() * 20 + 10 + 'px';

        borderColor = "blue";

    } 

//img.removeEventListener( transit_event, arguments.callee, false );

}, false)
</script>



все ок, но в мозилле опять этот баг ( т.е. это уже фича такая )

не установил высоту - перехода нет. появляется только потом ( при transitionend. она сразу стартует )

с подчёркнутым все отлично

<img *!*width="100"*/!* src="http://javascript.ru/forum/image.php?u=9861&dateline=1303740012" style="border : 3px red solid">


кстати, заметил еще одно

img.addEventListener(transit_event, function () {

    with(img.style) {

        width = "100px"

        opacity = "0.9";

        borderWidth = "10px"

        borderColor = "blue";

    } 

}, false)


тут то по окончанию перехода ( transition ) назначаются новые свойства стилей.

анимация начинает проигрываться опять ! хоть и этого незаметно

...

заметил через файрбаг сейчас.

надо быть внимательней )



UPD : ВОТ ЭТА ССЫЛКА ответила на все мои вопросы!

Последний раз редактировалось melky, 05.05.2011 в 20:37.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
С помощью JS добавить к ссылкам картинку в CSS wlad2 Элементы интерфейса 7 16.10.2010 23:44
JQuery CSS анализатор javascript jQuery 2 15.08.2010 21:27
если (свойство css == 2) свойство css = 1; funkypublic Events/DOM/Window 1 09.06.2010 17:39
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 11:58
javascript, css и iexplorer Блондинко Internet Explorer 4 21.02.2008 12:39