vue動畫
一、vue中css 的動畫原理
![]()
![]()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fade出入動畫</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition:opacity 3s;
}
.fade-leave-to{
opacity: 0;
}
.fade-leave-active{
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<transition name="fade">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick: function () {
this.show = !this.show;
}
}
});
</script>
</body>
</html>
二、使用animate.css庫
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用animate.css庫</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="../animate.css" />
<style type="text/css">
/*@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.fade-enter-active {
transform-origin: left center;
animation: bounce-in 1s;
}
.fade-leave-active {
transform-origin: left center;
animation: bounce-in 1s reverse;
}*/
/*.enter{
transform-origin: left center;
animation: bounce-in 1s;
}
.leave{
transform-origin: left center;
animation: bounce-in 1s reverse;
}*/
</style>
</head>
<body>
<div id="app">
<!--自定義動畫enter 和 leave 的 class名稱-->
<!--使用animate.css庫-->
<transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用animate.css庫</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="../animate.css" />
<style type="text/css">
.fade-enter{
opacity: 0;
}
.fade-enter-active {
transition: opacity 3s;
}
.fade-leave-to{
opacity: 0;
}
.fade-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<!--自定義動畫enter 和 leave 的 class名稱-->
<!--使用animate.css庫-->
<transition name="fade"
type="transition"
:duration="{enter:5000,leave:10000}"
appear
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">切換</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
});
</script>
</body>
</html>
三 、vue 中的js動畫 與 velocity.js 動畫庫
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue中的js動畫 與 velocity.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.5/velocity.js"></script>
</head>
<body>
<div id="app">
<!--
作者：offline
時間：2019-03-24
描述：transition 的 幾個監聽鉤子函數
@before-enter
@enter
@after-enter
@before-leave
@leave
@after-leave
-->
<transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切換</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
},
handleBeforeEnter: function(el) {
//el.style.color = "red";
el.style.opacity = 0;
},
handleEnter: function(el, done) {
// setTimeout(() => {
// el.style.color = 'green';
// }, 2000);
// setTimeout(() => {
// done();
// }, 4000)
Velocity(el,{opacity:1},{duration:1000,complete:done})
},
handleAfterEnter: function(el) {
//el.style.color = 'black'
alert("動畫結束")
}
}
});
</script>
</body>
</html>
四、vue中多元素或組件的過渡,vue中列表的過渡 以及動畫通過組件的形式封裝
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue中多元素或組件的過渡,vue中列表的過渡 以及動畫通過組件的形式封裝</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.5/velocity.js"></script>
<style type="text/css">
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<!--
作者：offline
時間：2019-03-24
描述：transition 的 幾個監聽鉤子函數
@before-enter
@enter
@after-enter
@before-leave
@leave
@after-leave
-->
<transition mode="in-out">
<!--<div v-if="show" key="hello">hello world</div>
<div v-else="show" key="bye">bye world</div>-->
<child v-if="show"></child>
<child-one v-else="show"></child-one>
</transition>
<button @click="handleClick">切換</button>
<transition-group>
<div v-for="(item,index) of list" :key="item.id">
{{item}}
</div>
</transition-group>
<button @click="handleBtnClick">Add</button>
<fade :show="show">
<div><h1>123</h1></div>
</fade>
<fade :show="show">
<p>asjd金卡說不定卡比燒烤店把卡仕達卡仕達你阿蘭埃裏克森你打曼德拉上的
啊看到了看上的</p>
</fade>
</div>
<script type="text/javascript">
//定義組件
Vue.component("child", {
template: "<div>child</div>"
});
Vue.component("child-one", {
template: "<div>child-one</div>"
});
Vue.component("fade",{
props:['show'],
template:`<transition
@before-enter="handleBeforeEnter"
@enter="handleEnter" @after-enter="handleAfterEnter">
<slot v-if="show"></slot>
</transition>`,
methods:{
handleBeforeEnter: function(el) {
//el.style.color = "red";
//el.style.opacity = 0;
},
handleEnter: function(el, done) {
setTimeout(() => {
el.style.color = 'orange';
}, 2000);
setTimeout(() => {
done();
}, 4000)
// Velocity(el,{opacity:1},{duration:1000,complete:done})
},
handleAfterEnter: function(el) {
el.style.color = 'black'
//alert("動畫結束")
}
}
});
var count = 0;
var app = new Vue({
el: "#app",
data: {
show: true,
list: []
},
methods: {
handleClick: function() {
this.show = !this.show;
},
handleBtnClick:function () {
this.list.push({
id:count++,
title:"hello world"
})
}
}
});
</script>
</body>
</html>
