一 vue的過渡 （動畫）
第四種方式 實現動畫
使用第三方js庫 Velocity.js
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../velocity.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> -->
</head>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
}
.fade-enter-active,
.fade-leave-active {
transition: 1s all;
}
.fade-leave-to,
.fade-enter {
opacity: 0;
}
</style>
<body>
<div id="app">
<button @click="show=!show">按鈕</button>
<transition @leave="leave" @enter="enter" @before-enter="beforeEnter">
<div id="box" v-show="show"></div>
</transition>
</div>
<script src="../vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
show: true,
},
methods: {
beforeEnter: function(el) {
el.style.opacity = 0
el.style.transformOrigin = 'left'
},
enter: function(el, done) {
Velocity(el, {
opacity: 1,
fontSize: '1.4em'
}, {
duration: 300
})
Velocity(el, {
fontSize: '1em'
}, {
complete: done
})
},
leave: function(el, done) {
console.log("離開", el);
Velocity(el, {
translateX: '15px',
rotateZ: '50deg'
}, {
duration: 600
})
Velocity(el, {
rotateZ: '100deg'
}, {
loop: 2
})
Velocity(el, {
rotateZ: '45deg',
translateY: '30px',
translateX: '30px',
opacity: 0
}, {
complete: done
})
}
}
})
</script>
</body>
</html>