首页 > 其他 > 详细

Vue学习笔记【20】——Vue中的动画(使用动画钩子函数)

时间:2019-11-25 10:09:55      阅读:95      评论:0      收藏:0      [点我收藏+]

定义及使用钩子函数

  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>
  1. 定义三个 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;
        }
      }
  1. 定义动画过渡时长和样式:

 .show{
      transition: all 0.4s ease;
    }

 

Vue学习笔记【20】——Vue中的动画(使用动画钩子函数)

原文:https://www.cnblogs.com/superjishere/p/11925719.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!