先简单的用两个animate特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="vm">
<transition
enter-active-class="animated flash"
leave-active-class="animated bounceIn">
<div v-if="show">Hello World</div>
</transition>
<button @click="handleClick" type="button">change</button>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
});
</script>
</body>
</html>
我们点击change的时候特效是正常的,但是当我们重新刷新页面的时候会发现第一次渲染的时候,并没有效果出来,那么如果我现在想要页面刷新的时候就有特效出来该怎么做呢?
apper表示页面第一次渲染出来就需要要效果,效果的内容是appear-active-class="animated flash"
保存刷新,发现直接就有特效出来了
我们现在用的antimate动画其实是用keyframes写的css3效果
但是如果我们想要transiton的过渡效果和antimate动画效果一起使用怎么办呢?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="animate.css">
<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition: opacity 3s;
}
.fade-leave-to{
opacity: 0;
}
.fade-leave-active{
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="vm">
<transition
name="fade"
appear
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" type="button">change</button>
</div>
<script>
var vm = new Vue({
el: '#vm',
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
});
</script>
</body>
</html>
现在我们既有keyframes这种CSS动画,又有transiton这种过渡动画,
我们自己设置的transtion这种动画是3s,那么animate这种动画效果是几秒呢?
查看源码我们发现是1秒
那么,整个动画是以什么时长为结束时长呢?Vue有时候自己也搞不清楚以哪个为结束时长
这个时候我们可以手动设置
type表示是以谁为结束时长
除了调用type我们能不能自己设置时长呢?
自己定义了10秒时长
我们可以在控制台中查看
屏幕上的元素已经消失了,但动画还要持续至10秒才会结束
自定义时长还可以写的更加复杂一点:
分别定义入场和出场动画时长