Показать сообщение отдельно
  #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.
Ответить с цитированием