vue 中js中的钩子动画

vue 的文档在不断的扩充当中，所以学习的速度要跟上进步的速度

比如Java，以前的struts2 --> ssm --> spring boot --> ??

总之技术不断的发展更新

App.vue

<template>
  <div id="app">
    <p>action is power</p>
    <p>{{message}}</p>
    <el-button @click="visible = !visible">change</el-button>

    <!-- js 钩子动画 -->
    <transition
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:before-leave="beforeLeave"
      v-on:leave="leave"
    >
      <Anim v-show="visible"></Anim>
    </transition>
  </div>
</template>

<script>
import Anim from "@/components/Anim.vue";
export default {
  name: "app",
  components: {
    Anim,
  },
  data() {
    return {
      message: "java",
      visible: false,
    };
  },
  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0;
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    enter: function (el, done) {
      this.Velocity(el, { opacity: 1 }, { duration: 3000, complete: done });
    },
    // --------
    // 离开时
    // --------

    beforeLeave: function (el) {
      el.style.opacity = 1;
    },
    // 当与 CSS 结合使用时
    // 回调函数 done 是可选的
    leave: function (el, done) {
      this.Velocity(el, { opacity: 0 }, { duration: 500, complete: done });
    },
  },
};
</script>

<style lang = "scss">
#app {
}
</style>

 

这里用到了 Velocity 需要安装

可以看这个处理这个问题

https://www.cnblogs.com/keyi666/p/13143639.html

需要说的是几个钩子函数意思

动画执行值钱的状态

v-on:before-enter="beforeEnter"

 

动画执行之后的状态

v-on:enter="enter"

在enter 方法中，必须在动画执行后，调用done 函数，否则afterEnter 清理函数不执行！

动画的过渡效果也不生效！

下面这个介绍也不错

https://www.cnblogs.com/wanan-01/p/10064372.html