Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   совместимость с CSS3 (https://javascript.ru/forum/jquery/24910-sovmestimost-s-css3.html)

Nightmare 18.01.2012 18:33
совместимость с CSS3
 
Код:
div {
    transition: margin 1.2s linear;
}
div.move {
    margin-top: 100px;
}
<a href="" title="click to move div">move</a>
<div>move</div>



$('a').click(function() {
    $('div').toggleClass('move');
    return false;
});


Вопрос:
Можно ли определить окончания анимации CSS3 с помощью jQ(Javascript).

Например по кончании анимации хочу получить сообщение о том, что блок успешно передвинулся.
Заранее спасибо.

Octane 18.01.2012 18:40
событие transitionend

Nightmare 18.01.2012 19:19 
<html>
<head>
    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var foo = document.getElementById('foo');
            foo.addEventListener('transitionEnd', function(e) {
                //this.parentNode.removeChild(this);
                alert('bingo!')
            }, false);
            foo.style.opacity = '0';
            foo = null;
        });
    </script>
<style>
    #foo {
        opacity:1;
        -moz-transition:opacity 1s linear;
        -webkit-transition:opacity 1s linear;
        -o-transition:opacity 1s linear;
        transition:opacity 1s linear;
    }
</style>
</head>
<body>
<div id="foo">Foo</div>
</body>

</html>


не работает, даже если проверять на вебките(webkitTransitionEnd), мозилле (mozTransitionEnd) и т.д.

Octane 18.01.2012 19:39
https://developer.mozilla.org/en/CSS/CSS_transitions

в Firefox 9.0.1 работает
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>…</title>
	<style>
		.trans {
			opacity: 0;
			-moz-transition: opacity 1s linear;
			-webkit-transition: opacity 1s linear;
			-o-transition: opacity 1s linear;
			transition: opacity 1s linear;
		}
	</style>
</head>
<body>
	<div id="foo">Foo</div>
	<script src="http://code.jquery.com/jquery.js"></script>
	<script>
		$("#foo").bind("transitionend", function () {
			alert("O_o");
		}).addClass("trans");
	</script>
</body>
</html>


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