Форум

Nightmare · #1 (**permalink**) 18.01.2012, 18:33

Код:

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 · #2 (**permalink**) 18.01.2012, 18:40

событие transitionend

Nightmare · #3 (**permalink**) 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 · #4 (**permalink**) 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>

Форум

Справочник

Discord чат

Курсы javascript