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)
}
}
/* 動畫開始時存在，動畫結(jié)束時移除，監(jiān)聽到這種變化之后，就開始動畫了 默認是v-enter-active*/
.fade-enter-active{
transform-origin: left center;
animation: bounce-in 1s;
}
/* 動畫開始時存在，動畫結(jié)束時移除，監(jiān)聽到這種變化之后，就開始動畫了 默認是.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> 效果相同，動態(tài)組件也帶這個動態(tài)效果-->
<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)
}
}
/* 動畫開始時存在，動畫結(jié)束時移除，監(jiān)聽到這種變化之后，就開始動畫了 默認是v-enter-active*/
.acive{
transform-origin: left center;
animation: bounce-in 1s;
}
/* 動畫開始時存在，動畫結(jié)束時移除，監(jiān)聽到這種變化之后，就開始動畫了 默認是.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> 效果相同，動態(tài)組件也帶這個動態(tài)效果-->
<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> 效果相同，動態(tài)組件也帶這個動態(tài)效果-->
<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>
