1、如何在第一次打开页面的时候就出现动画效果
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
<link rel="stylesheet" type="text/css" href="./animate.css">
</head>
<body>
<div id="root">
<transition name='fade'
enter-active-class="animated swing"
leave-active-class="animated shake"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
这个代码可以实现点击toggle这个button按钮的时候，会出现相应的动画；但是其实在刷新页面或者第一次进入页面的时候，是没有动画的。
怎么做才可以在刷新页面的时候，也会出现动画的效果呢？
修改后的代码如下：
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
<link rel="stylesheet" type="text/css" href="./animate.css">
</head>
<body>
<div id="root">
<transition
name='fade'
appear
enter-active-class="animated swing"
leave-active-class="animated shake"
appear-active-class="animated swing"
>
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">toggle</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
在transition标签中，需要添加一个自定义的class，例子中添加的是appear-active-class，等号右边是动画的效果。还需要在上面添加一个appear属性，意思是第一次引入内容的时候，也会出现动画效果。
2、同时出现过渡和C3动画
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
<link rel="stylesheet" type="text/css" href="./animate.css">
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="root">
<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">toggle</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
这必须得重新把过渡的效果所需的代码给加上，在style标签中添加备用的过渡节点代码；在C3动画中的两个class中加入上面写的备用的两个代码“fade-enter-active”、“fade-leave-active”
这样在有C3动画效果的同时，也会出现过渡的效果。
这个时候出现一个问题，keyframes动画，也就是animate.css这个动画效果，点击查看animate.css库，可以看到持续时间只有1s，但是过渡的效果在文中我定义了3s。那么整个过程是1s还是3s?
这个时候可以手动设置时长，在标签transition内，增加type="transition",即整个时长是以transition过渡效果为基准的：
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./vue.js"></script>
<link rel="stylesheet" type="text/css" href="./animate.css">
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="root">
<transition
type="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">toggle</button>
</div>
<script>
var vm = new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
上面是以过渡效果的时长为总时长，那么可不可以自定义一个总时长呢？
是可以的，在transition标签内增加一个属性的绑定，增加:duration="5000",这个是以毫秒为时间计算的，这个表明是总时长是5s。
image.png
这个表明即使过渡效果在3s内完成，但是因为整个时长还未结束，当5s结束后，div标签中的class就会消失。随即代表总时长结束。
也可以设置的更复杂一点：分别设置入场动画和出场动画的总时长，比如：
<div id="root">
<transition
:duration="{enter:5000,leave:10000}"
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>
上面代码在transition标签内设置:duration={enter:5000,leave:10000}
这个就设置成了入场动画的整个总时长是5s，出厂动画的整个总时长是10s。
网友评论