本文主要是介绍12 动画transition的使用2，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
划重点
- Vue 动画：transition / transform
- 在动画周期中执行动动画（上一篇是通过动画样式控制动画）
清蒸扇贝
<!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="./lib/vue-2.6.10.js"></script><style>/* 动画的几个周期：开始阶段：v-enter :开始动画前 （这是一个时间点）v-enter-active: 执行动画中...v-enter-to:开始动画执行后 （这是一个时间点）离开阶段：v-leave:离开动画前 （这是一个时间点）v-leave-active： 离开动画的过程中... v-leave-to: 离开动画之后，离开的终止状态 这个时候元素动画已经结束了 （这是一个时间点）*/.ball {width: 15px;height: 15px;/* 半径： */border-radius: 50%;background-color: red}</style>
</head><body><div id="app"><input type="button" value="快到碗里来" @click="flag=!flag"><!-- 1:使用 transition 元素把小球包裹起来 --><transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"><div class="ball" v-show="flag"></div></transition></div><script>var vm = new Vue({el: '#app',data: {flag: false,flag2: false},methods: {//注意： 动画钩子函数 的第一个参数：el ：表示 要执行动画的那个DOM元素，是一个原生的JS DOM 对象 ； //我们可以认为：el 是通过 document.getElementById('')方式获取到的 原生 JS DOM 对象beforeEnter(el) {//beforeEnter 表示动画入场之前； 这个时候；动画还没有开始；；； 可以在 beforeEnter 中设置元素开始动画之前的起始样式 / 起始位置//设置 小球开始动画前的起始位置：el.style.transform = "translate(100px,0)"},enter(el,done) {//这句话没有太大的实际作用；但是不写的话；出不来动画的效果//可以认为：el.offsetWidthel.offsetWidth//enter 表示动画开始之后 的样式，这里 可以设置小球完成动画之后的 结束状态el.style.transform = "translate(150px,450px)"el.style.transition = 'all 2s ease '// done:回调函数 是必须的 //这里的done ;起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用done()},afterEnter(el) {//动画 完成之后 ，，会回调 afterEnter this.flag = !this.flag}}})</script></body></html>实现：一个小球从位置（100px,0）向下移动到（150px,450px） 位置 并消失。
这篇关于12 动画transition的使用2的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
