Vue动画钩子函数

最新推荐文章于 2024-12-28 09:15:00 发布

xingxingxingge

最新推荐文章于 2024-12-28 09:15:00 发布

阅读量588

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/xingxingxingge/article/details/87741041

版权

Vue 专栏收录该内容

19 篇文章

订阅专栏

下面来个半场动画的例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>vue动画</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    #grou {
      background-color: #F00;
      width: 15px;
      height: 15px;
      border-radius: 50%;
    }
  </style>
</head>

<body>
  <div id="app">
    <button @click="flag = ! flag">点我</button>
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div id="grou" v-if="flag"></div>
    </transition>
  </div>
</body>
<script>
  var myapp = new Vue({
    el: "#app",
    data: {
      flag: false,
    },
    methods: {
      //vue动画钩子函数的第一个参数el表示要执行动画的DOM元素
      beforeEnter(el) {//动画入场之前,可以在这里设置元素动画入场之前的样式
        el.style.transform = "translate(0,0)"
      },
      enter(el, done) {
        /*动画入场, 这里的 done 就是 afterEnter 动画完成之后立即调用afterEnter
        官网是这么解释的: 当只用 JavaScript 过渡的时候, 
        在 enter 和 leave 中必须使用 done 进行回调,
        否则, 它们将被同步调用, 过渡会立即完成*/
        el.offsetWidth //这句话貌似没什么用,但是不写没有动画效果
        el.style.transform = "translate(150px,200px)"
        el.style.transition = "all 1s ease"
        done()
      },
      afterEnter(el) {//动画入场之后
        //动画结束之后元素消失
        this.flag = !this.flag
      }
    },
  })
</script>

</html>