[TOC] #### 1.使用.js库控制vue过渡动作 引入velocity.js http://velocityjs.org/ https://www.bootcdn.cn/velocity/ <div id="hdcms"> <button @click="type=!type">切换</button> <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false"> <h1 v-if="type">houdunren.com后盾人</h1> </transition> </div> <script> new Vue({ el: '#hdcms', data: { type: false }, methods: { beforeEnter(el){ el.style.opacity=0; }, enter(el,done){ Velocity(el,{opacity:1},{ duration: 2000 ,complete:done}) }, leave(el,done){ Velocity(el,{opacity:0,rotateZ:'-690deg'},{ duration: 2000 ,complete:done}) } } }); </script>