Vue动画之一： css方式
2018-09-04 本文已影响0人
婷诗漾
在Vue的项目中， 需要用到动画效果的， 当然可以了， 下面将介绍通过Css做动画的方式。
1、通过设置 fade-enter, fade-enter-to, .fade-enter-active 和 fade-leave, fade-leave-to, .fade-leave-active来实现动画。
<head>
<script src ="vue.js"></script>
<style>
.fade-enter, .fade-leave-to {
opacity : 0 ;
}
.fade-enter-active, .fade-leave-active {
transition : opacity 3s;
}
/*也可以用 v 代替 fade */
</style>
</head>
<body>
<div id = "myApp">
<transition name = "fade">
<h1 v-if = "show"> Hello Everyone, This is Christine! </h1>
</transition>
<button @click="handleClick"> 切换</button>
</div>
<!-- 若用 v-show 的话， 没有具体的效果 -->
<script>
new Vue({
el : "#myApp",
data : {
show : true
},
methods : {
handleClick : function () {
this.show = !this.show;
}
}
})
</script>
</body>
2、通过引用 animate.css 动画库， 实现动画效果。
<head>
<meta charset="UTF-8">
<title> 动画-animate.css </title>
<script src ="vue.js"></script>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<div id = "myApp">
<transition name = "fade"
enter-active-class = "animated pulse"
leave-active-class = "animated wobble">
<h1 v-show = "show"> Hello Everyone, This is Christine! </h1>
</transition>
<button @click="handleClick"> 切换</button>
</div>
<script>
new Vue({
el : "#myApp",
data : {
show : true
},
methods : {
handleClick : function () {
this.show = !this.show;
}
}
})
</script>
3、混用的方式：
a： transition 上面添加 appear 是为了在第一次刷新的时候， 也有动画
b： 由于animate.css 和 自定义动画的持续的时间不一致， 故， 需要一致
type = "transition"
:duration = "5000"
:duration = "{enter: 5000, leave : 10000}"
<head>
<meta charset="UTF-8">
<title> 同时使用animate.css 和 自定义的动画 </title>
<script src ="vue.js"></script>
<link rel="stylesheet" href="animate.css">
<style>
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active, .fade-leave-active{
transition: opacity 3s;
}
</style>
<!--
1、 transition 上面添加 appear 是为了在第一次刷新的时候， 也有动画
2、由于animate.css 和 自定义动画的持续的时间不一致， 故， 需要一致
type = "transition"
:duration = "5000"
:duration = "{enter: 5000, leave : 10000}"
-->
</head>
<body>
<div id = "myApp">
<transition name = "fade"
:duration = "{enter: 5000, leave : 10000}"
appear
enter-active-class = "animated pulse fade-enter-active"
leave-active-class = "animated wobble fade-leave-active"
appear-active-class = "animated tada"
>
<h1 v-show = "show"> Hello Everyone, This is Christine! </h1>
</transition>
<button @click="handleClick"> 切换</button>
</div>
<script>
new Vue({
el : "#myApp",
data : {
show : true
},
methods : {
handleClick : function () {
this.show = !this.show;
}
}
})
</script>
</body>
