1.自定义的keyframes动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中动画</title>
<script src="./vue.js"> </script>
<style>
@keyframes bounce-in{
0%{
transform: scale(0)
}
50%{
transform: scale(1.5)
}
100%{
transform: scale(1)
}
}
/* 动画开始时存在，动画结束时移除，监听到这种变化之后，就开始动画了 默认是v-enter-active*/
.fade-enter-active{
transform-origin: left center;
animation: bounce-in 1s;
}
/* 动画开始时存在，动画结束时移除，监听到这种变化之后，就开始动画了 默认是.v-leave-active*/
.fade-leave-active{
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
</head>
<body>
<div id="root">
<transition name="fade">
<!-- <div v-show="show">hello</div> 效果相同，动态组件也带这个动态效果-->
<div v-if="show">hello</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('child-one',{
template:'<div>child-one</div> '
})
var app = new Vue({
el:'#root',
data:{
show :true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
- 自定义动画的名称
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中动画</title>
<script src="./vue.js"> </script>
<style>
@keyframes bounce-in{
0%{
transform: scale(0)
}
50%{
transform: scale(1.5)
}
100%{
transform: scale(1)
}
}
/* 动画开始时存在，动画结束时移除，监听到这种变化之后，就开始动画了 默认是v-enter-active*/
.acive{
transform-origin: left center;
animation: bounce-in 1s;
}
/* 动画开始时存在，动画结束时移除，监听到这种变化之后，就开始动画了 默认是.v-leave-active*/
.leave{
transform-origin: left center;
animation: bounce-in 1s reverse;
}
</style>
</head>
<body>
<!-- 自定义动画名称 -->
<div id="root">
<transition name="fade"
enter-active-class="acive"
leave-active-class="leave"
>
<!-- <div v-show="show">hello</div> 效果相同，动态组件也带这个动态效果-->
<div v-if="show">hello</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('child-one',{
template:'<div>child-one</div> '
})
var app = new Vue({
el:'#root',
data:{
show :true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
3.vue使用Animate.css库
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中动画</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-show="show">hello</div> 效果相同，动态组件也带这个动态效果-->
<div v-if="show">hello</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('child-one',{
template:'<div>child-one</div> '
})
var app = new Vue({
el:'#root',
data:{
show :true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>
- 第一次显示也有动画 appear appear-active-class
<div id="root">
<transition name="fade"
appear
enter-active-class="animated swing"
leave-active-class="animated shake"
appear-active-class="animated slideInDown"
>
<div v-if="show">hello</div>
</transition>
<button @click="handleClick">切换</button>
- 入场动画css3+过渡动画效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue中动画</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>
<!-- 入场动画css3+过渡动画效果-->
<!-- type="transition"以transition动画时长为标准 -->
<!-- :duration='10000'自定义动画时长，10000是10秒 -->
<div id="root">
<transition type="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 slideInDown"
>
<div v-if="show">hello</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script>
Vue.component('child-one',{
template:'<div>child-one</div> '
})
var app = new Vue({
el:'#root',
data:{
show :true
},
methods:{
handleClick:function(){
this.show = !this.show
}
}
})
</script>
</body>
</html>