vue.js中添加动画

最新推荐文章于 2024-06-29 11:36:40 发布

曾皙

最新推荐文章于 2024-06-29 11:36:40 发布

阅读量1k

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_39148344/article/details/84259574

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

通过触发事件，改变data中的值，或者改变点击标签元素上的属性值

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

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="./node_modules/vue/dist/vue.js"></script>
</head>

<body>
  <div id="app">
    <!--js关于入场动画的钩子 @before-enter代表事件被触的时候;@enter代表运行动画的时候;@after-enter结束的时候 
			当为出场的时候从显示到隐藏的时候吧enter改为leave就可以-->
    <transition @before-enter="handbeforeEnter" @enter="enter" @after-enter="handafterEnter">
      <div v-if="show">hello world{{a}}</div>
    </transition>
    <button @click="click">动画切换</button>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        show: true,
        a: "曾庆霄"
      },
      //他们定义的事件都传递el运行动画的那个DIV,和@enter事件中的done参数他是个回调函数运行后代表动画运行结束
      methods: {
        click: function () {
          this.show = !this.show;
        },
        handbeforeEnter: function (el) {
          el.style.color = 'red'
        },
        enter: function (el, done) {
          el.style.color = '#000000';
          done();
        },
        handafterEnter: function (el) {
          el.style.color = 'red'
        }
      }
    })
  </script>
</body>

</html>

曾皙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js中添加动画

通过触发事件，改变data中的值，或者改变点击标签元素上的属性值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./node_modules/vue...
复制链接

扫一扫

专栏目录