vue 的4种实现动画方式_vue html动画-CSDN博客

本文链接：https://blog.csdn.net/qq_41614928/article/details/108811448

效果图如下：

在这里插入图片描述

1. 合使用第三方 JavaScript 动画库，如 Velocity.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
   <button @click="onOff">动画开关</button>
   <message v-show="isShow" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script
	src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js">
</script>

<script>
let message = {
	template: `
	<transition name="fade"
	:css="false"
	@before-enter="beforeEnter"
	@enter="enter"
	@before-leave="beforeLeave"
    @leave="leave">
    <div style="width:100px; height:100px; background: red"> 我显示了 </div>
	</transition>
	`,
	methods: {
		beforeEnter(el) {
		el.style.opacity = 0
		},
		enter(el, done) {
			Velocity(el, { opacity: 1 }, { duration: 500, complete: done })
		},
		beforeLeave(el) {
			el.style.opacity = 1
		},
		leave(el, done) {
			Velocity(el, { opacity: 0 }, { duration: 500, complete: done })
		}
	}
}

let vm = new Vue({
    el:'#app',
    data:{
        isShow: false,  //控制动画 true:显示
    },
    components:{ message },
    methods:{
        onOff(){
            this.isShow = !this.isShow;
        }
    }
})
</script>
</body>
</html>

2. 通过CSS 过渡和动画中自动应用 class

<style>
/* 定义过度动画
	v-enter：定义元素进入的初始状态
	v-enter-active：定义元素进入过渡动画的 transition
	v-enter-to：定义元素进入动画结束时的状态
	v-leave：定义元素离开的初始状态
	v-leave-active：定义元素离开过渡动画的 transition
	v-leave-to：定义元素离开动画结束时的状态
	
	.v-enter,.v-leave-to{ //元素进入前和离开结束时的状态 }
	.v-enter-to,.v-leave{ 
	    //这组css会在过渡结束后被移除，立即恢复，没有过渡动画
	   //所以为了保证有过渡，元素本身也需要有transition才能有过渡动画来恢复初始样式
	}
 */
.fade-enter-active,
.fade-leave-active {
	transition: opacity .5s;
}

.fade-enter,
.fade-leave-to {
	opacity: 0;
}
</style>

<script>
Vue.component('message', {
//Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
// 使用transition组件应用过度动画 条件渲染 (使用 v-if ) 条件展示 (使用 v-show )
template: `
<transition name="fade">
...
</transition>
`,
})
</script>

3. 使用第三方 CSS 动画库，如 Animate.css

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet"
type="text/css">
//使用
<transition 
	enter-active-class="animated bounceIn"
	leave-active-class="animated bounceOut"
>
<div> Animate.css </div>
></transition>
//动画查看： https://www.dowebok.com/demo/2014/98/

4. 在过渡钩子函数中使用 JavaScript 直接操作 DOM

JavaScript 钩子

可以在属性中声明 JavaScript 钩子，使用JS实现动画。

Vue.component('message', {
	template: `
		<transition
		v-on:before-enter="beforeEnter" // 动画开始前，设置初始状态
		v-on:enter="enter" // 执行动画
		v-on:after-enter="afterEnter" // 动画结束，清理工作
		v-on:enter-cancelled="enterCancelled" // 取消动画
		v-on:before-leave="beforeLeave"
		v-on:leave="leave"
		v-on:after-leave="afterLeave"
		v-on:leave-cancelled="leaveCancelled"
		>
		<div> 动画 </div>
		</transition>
	`,
	methods: {
		//用js操作css 实现动画
		beforeEnter(el) {
			el.style.opacity = 0 // 设置初始状态
		},
		enter(el, done) {
			document.body.offsetHeight; // 触发回流激活动画
			el.style.opacity = 1 // 设置结束状态
		}
	},
})