управляемые css transitions
не так давно ( 2 дня назад ) начал постигать анимации через относительно недавно появившееся CSS-правило transition.
вся моя функция animate свелась к
для прописывания стилей элементу ( или элементам ) долго мучился над функцией получения селектора . то есть, это :
<div class="anim">
<img src="abc">
<img class="a" src=".....">
*!*<img class="a" src="ololo">*/!*
</div>
селектор для подчеркнутой получается, например DIV.anim IMG.a:nth-child(2) знаки > и < не юзал. просто забыл про них :) правда , одна проблемка. к вам такой вопрос. на w3org описаны свойства этих анимаций. только не могу никак понять, как их использовать ? я вроде с онглицким дружу, но не могу вникнуть :) Цитата:
а второе... особенно интересует слово precedence. "приоритет" переводится. UPD. как всегда, выручает мозилла док центр https://developer.mozilla.org/en/CSS/CSS_transitions значит, еще ничего не реализовано? |
Можно попробовать использовать заранее подготовленные классы, добавляя их и удаляя можно довольно сложную анимацию сделать.
<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с, конец анимации можно отловить если засечь время от ее начала, а начало происходит по какому либо действию, что нибудь можно придумать |
я уже придумал :)
и 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"; |
Цитата:
Цитата:
Просто транзишн странно поодерживается пока что в FF4 например уже w3c transition, в 3.6 -moz-transition, хром новый уже тоже вроде поддерживает w3c без префикса -webkit, опера новая тоже стала поддерживать транзишн но со своим префиксом, и т.п. просто не знаю, вдруг с событием transitionend тоже у каждого что-то свое. Или оно вообще не везде еще появилось. Цитата:
|
Цитата:
в опере 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 : ВОТ ЭТА ССЫЛКА ответила на все мои вопросы! |
| Часовой пояс GMT +3, время: 10:20. |