您的位置：首页 > Web前端 > Vue.js

在vue中同时使用过渡和动画

2019-02-24 20:31 267 查看

我们先来看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在vue中同时使用过渡和动画</title>
<link rel="stylesheet" href="./animate.css">
<script src="../node_modules/vue/dist/vue.js"></script>
</head>

<body>
<div id="root">
<transition
name="fade"
enter-active-class="animated swing"
leave-active-class="animated shake">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">change</button>
</div>
<script>
var vm=new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function () {
this.show=!this.show
}
}
})
</script>
</body>
</html>

可以实现在内容进入的时候左右晃动，消失的时候上下抖动的效果，接下来我们发现一旦刷新页面，这个元素第一次出现的时候并没有出现动画效果，为此可以这样做，自定义一个appear-active-class，让它等于 enter-active-class：

appear-active-class="animated swing"

并再添加一个appear的属性，表示在一开始出现的时候元素会有一个动画效果，为我们自定义的属性，这个属性用了animate库里的swing一个动画：

<transition
appear
name="fade"
enter-active-class="animated swing"
leave-active-class="animated shake"
appear-active-class="animated swing"> <!--刷新的时候也有动画效果-->
<div v-show="show">hello world</div>
</transition>

这样刷新的时候也就会有动画效果了。现在这个元素上只有animate这个库里的动画效果，相当于@keyframes的动画效果，我们希望结合transition过渡的效果，可以这样：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在vue中同时使用过渡和动画</title>
<link rel="stylesheet" href="./animate.css">
<script src=".././node_modules/vue/dist/vue.js"></script>
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active{
transition: opacity 3s;
}
</style>
</head>

<body>
<div id="root"> <!--表示动画的时长以transition过渡效果定义的为准-->
<transition
appear
name="fade"
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"> <!--刷新的时候也有动画效果-->
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">change</button>
</div>
<script>
var vm=new Vue({
el:"#root",
data:{
show:true
},
methods:{
handleClick:function () {
this.show=!this.show
}
}
})
</script>
</body>
</html>

这样动画就有一个透明度变化的效果。现在我们很明显的知道transition过渡的效果是3s，那么animate提供的动画效果是几秒呢？打开animate.css源码进行查看，实际上animated定义的动画时长是1s：

.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

那么问题来了，最终动画执行的时间是以什么为标准来计算的呢？这个时候无我们可以手动来设置动画执行的时长，我们现在已3s为整个动画执行的时间，可以这么设置：

<transition
type="transition"
appear
name="fade"
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing"> <!--刷新的时候也有动画效果-->
<div v-show="show">hello world</div>
</transition>

表示动画的时长以transition执行的时长为准。除了这样设置，我们还可以自定义总时长：

<transition
:duration="5000"
appear
name="fade"
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>

表示动画样式5秒后才会被清除掉，而文字3秒就会弹出来。设置的更复杂一些，可以写成，入场动画为5秒，出场动画为8秒：

<transition
:duration="{enter:5000, leave:8000}"
appear
name="fade"
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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航