vue 使用动画钩子函数（半场动画）

使用动画钩子函数（半场动画）

https://blog.csdn.net/weixin_30423977/article/details/95577829

• v-on:before-enter=“beforeEnter”入场动画之前执行beforeEnter方法
• v-on:enter=“enter”入场过程中执行的方法 v-on:after-enter=“afterEnter”入场后执行的方法
• v-on:enter-cancelled=“enterCancelled”入场动画取消的时候执行方法（进入取消）进入过渡被打断时
• v-on:before-leave=“beforeLeave”离场动画之前执行beforeLeave方法
• v-on:leave=“leave”离场动画过程中执行的方法
• v-on:after-leave=“afterLeave”离场结束后执行的方法
• v-on:leave-cancelled=“leaveCancelled”离场动画取消时执行的方法离开过渡被打断时

vue实例

1. 定义 transition 组件以及三个钩子函数：
<div id="app">
    <input type="button" value="切换动画" @click="isshow = !isshow">
    <transition
    @before-enter="beforeEnter"
    @enter="enter"
    @after-enter="afterEnter">
      <div v-if="isshow" class="show">OK</div>
    </transition>
  </div>
2. 定义三个 methods 钩子方法：
methods: {
        beforeEnter(el) { // 动画进入之前的回调
          el.style.transform = 'translateX(500px)';
        },
        enter(el, done) { // 动画进入完成时候的回调
          el.offsetWidth;
          el.style.transform = 'translateX(0px)';
          done();
        },
        afterEnter(el) { // 动画进入完成之后的回调
          this.isshow = !this.isshow;
        }
      }
3. 定义动画过渡时长和样式：
.show{
      transition: all 0.4s ease;
    }

可以通过 appear 特性设置节点在初始渲染的过渡（页面入场效果）

<transition-group tag="ul" name="list"  appear>
      <li v-for="(item, i) in list" :key="i">{{item}}</li>
  </transition-group>

过渡模式

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

   <button @click="md='aa'">a</button>
			<button @click="md='bb'">b</button>
			<button @click="md='cc'">c</button>
			
			<transition name="bbb"   mode="out-in">
			  <component :is="md"></component>
			</transition>