javascript判断css3动画结束 css3动画结束的回调函数

关于javascript判断css3动画结束和css3动画结束的回调函数，下面是一个完整的攻略。

如何判断CSS3动画是否结束？

CSS3动画有两个状态：正在运行和已经结束。我们可以通过 JavaScript 来判断动画是否结束，实现各种复杂的交互效果。

在判断CSS3动画结束的时候，我们需要监听动画事件。CSS3动画有两个相关的事件：transitionend和animationend。我们可以监听这两个事件来判断动画是否结束。

1. transitionend事件

当一个元素的CSS3样式发生变化时，浏览器会自动触发transitionend事件，这个事件表示CSS3过渡效果的结束。我们可以通过监听这个事件来判断CSS3动画是否结束。

代码示例：监听transitionend事件，判断CSS3动画是否结束

<!--CSS-->
<style>
.box{
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s;
}
</style>

<!-- HTML -->
<div class="box"></div>

<!-- JavaScript -->
<script>
var box = document.querySelector('.box');
box.addEventListener('transitionend', function(event) {
    console.log('CSS3动画结束了！');
}, false);

box.style.width = '200px'; // 修改CSS3属性
</script>

当我们把.box的宽度从100px变成200px时，就会触发transitionend事件，从而输出'CSS3动画结束了！'。

1. animationend事件

animationend事件表示CSS3动画结束的事件。当CSS3动画结束时，浏览器会自动触发animationend事件。我们可以通过监听这个事件来判断CSS3动画是否结束。

代码示例：监听animationend事件，判断CSS3动画是否结束

<!--CSS-->
<style>
.box{
    width: 100px;
    height: 100px;
    background-color: red;
    animation: zoom-in 2s;
}

@keyframes zoom-in {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(2);
    }
}
</style>

<!-- HTML -->
<div class="box"></div>

<!-- JavaScript -->
<script>
var box = document.querySelector('.box');
box.addEventListener('animationend', function(event) {
    console.log('CSS3动画结束了！');
}, false);
</script>

当.box动画结束时，就会触发animationend事件，从而输出'CSS3动画结束了！'。

如何在CSS3动画结束时执行回调函数？

除了判断CSS3动画是否结束，我们还可以在CSS3动画结束时执行回调函数。这样可以在动画结束后执行一些自定义的操作，比如修改元素的CSS样式，切换CSS类等等。

实现在CSS3动画结束时执行回调函数，我们同样需要监听transitionend和animationend事件。当这两个事件发生时，我们就可以执行对应的回调函数了。

代码示例：在CSS3动画结束时执行回调函数

<!--CSS-->
<style>
.box{
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s;
}
.box.big{
    width: 200px;
}
</style>

<!-- HTML -->
<div class="box"></div>

<!-- JavaScript -->
<script>
var box = document.querySelector('.box');
box.addEventListener('transitionend', function(event) {
    console.log('CSS3动画结束了！');
    box.classList.add('big'); //执行回调函数，在动画结束时添加CSS类
}, false);

box.style.width = '200px'; // 修改CSS3属性
</script>

当CSS3动画结束时，回调函数就会被执行。上述代码在CSS3动画结束时，会给.box添加一个CSS类'big'，从而把.box变成宽度为200px，高度为100px的红色正方形。

如果你想在CSS3动画开始时执行回调函数呢？我们可以通过监听transitionstart和animationstart事件来实现。

代码示例：在CSS3动画开始时执行回调函数

<!--CSS-->
<style>
.box{
    width: 100px;
    height: 100px;
    background-color: red;
    transition: width 2s;
}
.box.big{
    width: 200px;
}
</style>

<!-- HTML -->
<div class="box"></div>

<!-- JavaScript -->
<script>
var box = document.querySelector('.box');
box.addEventListener('transitionstart', function(event) {
    console.log('CSS3动画开始了！');
    box.classList.add('big'); //执行回调函数，在动画开始时添加CSS类
}, false);

box.style.width = '200px'; // 修改CSS3属性
</script>

当CSS3动画开始时，回调函数就会被执行。上述代码在CSS3动画开始时，会给.box添加一个CSS类'big'，从而把.box变成宽度为200px，高度为100px的红色正方形。

以上就是关于“JavaScript判断CSS3动画结束和CSS3动画结束的回调函数”的完整攻略，希望对你有所帮助！