动画执行时长
来源:5-3 在Vue中同时使用过渡和动画
weixin_慕神2105054
2021-03-14
老师,我设置了动画持续时长为9s,过渡时长为10s,但是最后实现的效果还是1s左右动画就结束了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./animate.min.css" />
</head>
<body>
<style>
.tbox {
width: 100px;
height: 200px;
background: rgb(58, 74, 78);
}
.fade-enter,
.fade-leave-to {
/* 出现的第一帧全透明,消失的从第2帧开始透明度走向0 */
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
/* 消失和隐藏的全过程中,opacity属性的变化要10s完成 */
transition: opacity 10s;
}
</style>
<div id="box">
<transition
:duration="9000"
name="fade"
enter-active-class="animate__animated animate__bounceInLeft fade-enter-active"
leave-active-class="animate__animated animate__backOutRight fade-leave-active"
>
<div v-show="show" class="tbox">动画盒子</div>
</transition>
<button @click="show=!show">btn</button>
</div>
<script src="../../public/lib/vue.js"></script>
<script>
new Vue({
el: '#box',
data: {
show: true
}
})
</script>
</body>
</html>
写回答
2回答
-
另外有可能你动画的执行时常就是1s,如果是这样,你改成9s 也没用
012021-03-15 -
Dell
2021-03-14
duration="9000" 前面的冒号去掉
00
相似问题