1，css的渐变效果，显示与隐藏
<html>
<head>
<style>
/*从透明的0到1显示的渐变效果*/
.v-enter{opacity:0;}
.v-enter-active{transition:opacity 3s}
/*从透明的1到0消失的渐变效果*/
.v-leave-to{opacity:0;}
.v-leave-active{transition:opacity 3s;}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<transition>
<div v-if="show">hello world</div><!--也可以用v-show-->
</transition>
<button @click="handleClick">切换</button>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function(){
this.show=!this.show//开关效果
}
}
})
</script>
</html>2.放大缩小的动画效果
<html>
<head>
<style>
@keyframes bounce-in{
0%{
transform:scale(0);
}
50%{
transform:scale(1.5);
}
100%{
transform:scale(1);
}
}
/*放大缩小的动画效果，animation创建一个1s的bounce-in的自定义动画*/
.v-enter-active{transform-origin:left center;animation:bounce-in 1s;}
.v-leave-active{transform-origin:left center;animation:bounce-in 1s;}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<transition>
<div v-if="show">hello world</div><!--也可以用v-show-->
</transition>
<button @click="handleClick">切换</button>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function(){
this.show=!this.show//开关效果
}
}
})
</script>
</html>接下来要使用一个animate.css样式库，可以去官网下载：
https:daneden.github.io/animate.css可以在官网上看有自己合适的动画效果，可以在标签transition引用，如下：
<html>
<head>
<link rel="stylesheet" type="text/css" href="animate.css">
<style>
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<transition name="fade" enter-active-class="animated swing" leave-active-class="animated tada"><!--分别用enter-active-class和leave-active-class显示和隐藏时的效果-->
<div v-if="show">hello world</div><!--也可以用v-show-->
</transition>
<button @click="handleClick">切换</button>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function(){
this.show=!this.show//开关效果
}
}
})
</script>
</html>3,自定义动画和渐变一起使用
<html>
<head>
<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 1s;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--用：duration来自定义动画时长-->
<transition :duration="{enter:5000,leave:10000}" appear name="fade" enter-active-class="animated swing" leave-active-class="animated tada" appear-active-class="animated swing"><!--appear加入后引入appear-active-class来定义刷新和入场的时候的动画效果-->
<div v-if="show">hello world</div><!--也可以用v-show-->
</transition>
<button @click="handleClick">切换</button>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
show:true
},
methods:{
handleClick:function(){
this.show=!this.show//开关效果
}
}
})
</script>
</html>
用model="out-in"来控制显示和隐藏的循序，控制多个组件和元素的动画效果
