方式一：css动画
过渡的类名
过渡的类名在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation
完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter
被删除)，在 transition/animation
完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation
完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave
被删除)，在 transition/animation
完成之后移除。
<!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>
<style>
/* 注意：这个6个过渡类，都是vue内置的，所以，需要使用vue提供的这个类名才行 */
.v-leave {
/* 定义 出场动画的 起始状态 */
/* 只停留一帧 */
transform: translateY(100px);
}
.v-leave-active {
/* 定义 出场动画 过程 */
transition: all 1s ease;
}
.v-leave-to {
/* 定义 出场动画 结束状态（即：该动画要达到的目标状态） */
transform: translateY(300px);
opacity: 0;
}
/* 定义 入场动画 */
.v-enter {
/* 定义 入场动画 的起始状态 */
transform: translateY(300px);
opacity: 0;
}
.v-enter-active {
/* 定义 入场动画 过程 */
transition: all 2s ease;
}
.v-enter-to {
/* 定义 入场动画 过程 */
/* 只停留一帧 */
transform: translateY(0px);
}
</style>
</head>
<body>
<div id="app">
<button @click="fn">过渡</button>
<!-- 如果要实现Vue中的过渡或者动画效果，需要使用内置的 transition 组件包裹要执行过渡或动画的元素才行 -->
<transition>
<h1 v-show="isShow">这个东西多少钱？how much？</h1>
</transition>
</transition>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
fn() {
this.isShow = !this.isShow
}
}
})
</script>
</body>
</html>
方式二：使用animate.css动画库
<!-- 引入 第三方css动画库 -->
<link rel="stylesheet" href="./node_modules/animate.css/animate.min.css">
<body>
<div id="app">
<button @click="fn">过渡</button>
<!-- 通过 修改过渡组件transition的样式属性，来指定我们要使用的动画类名 -->
<!-- animated 是必须要添加的一个类，说明当前元素要执行动画效果 -->
<!-- tada / bounceOutRight 是 animate.css 提供的 -->
<transition
enter-active-class="animated tada"
leave-active-class="animated hinge">
<h1 v-show="isShow">这个东西多少钱？how much？</h1>
</transition>
</div>
<script src="./vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: true
},
methods: {
fn() {
this.isShow = !this.isShow
}
}
})
</script>
</body>
方式三、使用Js钩子函数
<body>
<div id="app">
<button @click="isShow=!isShow">过渡</button>
<transition
@before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter">
<h1 v-show="isShow">这个东西多少钱？how much？</h1>
</transition>
</div>
<script src="./vue.js"></script>
<script src="./node_modules/velocity-animate/velocity.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: false
},
methods: {
beforeEnter(el) {
// 开始动画之前，也就是起始状态
// console.log('before');
// 设置动画的起始状态
el.style.transform = 'translateY(300px)'
el.style.opacity = 0
el.style.transition = 'all 2s ease'
},
enter(el, done) {
// 动画指定的过程
// console.log('enter');
// 作用：告诉浏览器重绘或重排页面结构
// offsetWidth 会通知浏览器重新计算元素的宽度，这样，会造成浏览器重绘
// el.offsetWidth
el.offsetHeight
// 设置动画要达到的目标状态
el.style.transform = 'translateY(0px)'
el.style.opacity = 1
done()
},
afterEnter(el) {
// 动画结束
// console.log('after');
this.isShow = !this.isShow
}
}
})
</script>
</body>
方式四、使用velocity js动画库
<body>
<div id="app">
<button @click="isShow=!isShow">过渡</button>
<transition
@before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
>
<h1 v-show="isShow">这个东西多少钱？how much？</h1>
</transition>
</div>
<script src="./vue.js"></script>
<!-- 引包 -->
<script src="./node_modules/velocity-animate/velocity.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
isShow: false
},
// 因为 velocity.js 就是一个JS动画库,所以,我们再使用velocity的时候,就不要在同时使用 CSS3的动画, 否则, 会造成混乱
methods: {
beforeEnter(el) {
// 设置动画的起始状态
el.style.opacity = 0
el.style.fontSize = '12px'
el.style.color = '#f00'
},
enter(el, done) {
// 使用 Velocity.js 动画库的方式： 用法与 jQuery中的animate方法相同
// 第一个参数：表示要执行动画的元素
// 第二个参数：表示要执行动画的样式属性
// 第三个参数：表示动画执行的时间长度
// 第四个参数：表示动画执行完成的回调函数
// Velocity(el, { fontSize: 50, opacity: 1 }, 2000, done)
Velocity(el, { fontSize: 50, opacity: 1, color: '#0f0' }, {
duration: 2000,
complete: done
})
},
afterEnter(el) {
// 动画结束
this.isShow = !this.isShow
}
}
})
</script>
</body>
