<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在Vue中同时使用过渡和动画</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<style>
.fade-enter,
.fade-leave-to{
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition:opacity 10s;
}
div{
font-size: 20px;
width: 300px;
margin:200px auto;
text-align: center;
}
</style>
<body>
<div id="app">
<transition name='fade' appear type='transition' :duration="{enter:5000,leave:1000}"
enter-active-class='animated swing fade-enter-active'
leave-active-class='animated shake fade-leave-active'
appear-active-class='animated swing'
>
<div v-if='show'>hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
})
</script>
</body>
</html>
type='transition'与:duration="5000"二选一
使用animate.css必须使用vue的
enter-active-class和leave-active-class;后面紧跟animated类名和想使用的动画名称(区分大小写)；
animate 使用的是@keyframes动画，fade-enter-active,
fade-leave-active加的是transition动画。
transition动画和transform动画时长不一样，使用type='transition'以transition动画时长为准。或者 绑定属性:duration="5000"自定义时长;
fade名称与<transition name="fade">中name一致,
appear,appear-active-class实现页面加载的初次动画
网友评论