本文编写于 167 天前,最后修改于 135 天前,其中某些信息可能已经过时。

使用动画钩子函数

  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;
    }

更多相关系列教程请及时关注妙笔生花个人博客,本网站由皮皮家园终身维护!
1.Vue.js 是什么?起步及安装
http://blog.zh66.club/index.php/archives/474/
2.Vue.js 声明式渲染
http://blog.zh66.club/index.php/archives/476/
3.vue.js 条件与循环
http://blog.zh66.club/index.php/archives/477/
4.vue.js 处理用户输入
http://blog.zh66.club/index.php/archives/478/
5.vue.js实现跑马灯效果
http://blog.zh66.club/index.php/archives/479/
6.vue.js 事件修饰符
http://blog.zh66.club/index.php/archives/480/
7.vue.js 表单输入绑定
http://blog.zh66.club/index.php/archives/481/
8.vue.js 简易的计算器
http://blog.zh66.club/index.php/archives/482/
9.vue.js 中样式的使用
http://blog.zh66.club/index.php/archives/483/
10.vue.js 之 v-forkey 属性
http://blog.zh66.club/index.php/archives/484/
11.vue.js 内容的总结和回顾
http://blog.zh66.club/index.php/archives/485/
12.vue.js 中 v-if 和 v-show 的使用
http://blog.zh66.club/index.php/archives/486/
13.vue.js 品牌案例~列表的添加删除功能
http://blog.zh66.club/index.php/archives/488/
14.vue.js 品牌案例~列表的关键字检索功能
http://blog.zh66.club/index.php/archives/489/
15.vue.js 过滤器的基本使用
http://blog.zh66.club/index.php/archives/491/
16.vue.js 自定义一个私有的过滤器
http://blog.zh66.club/index.php/archives/490/
17.vue.js 过滤器以及 padStart 和 padEnd
http://blog.zh66.club/index.php/archives/499/
18.vue.js 自定义按键修饰符
http://blog.zh66.club/index.php/archives/500/
19.vue.js 自定义全局指令
http://blog.zh66.club/index.php/archives/501/
20.vue.js 自定义私有指令
http://blog.zh66.club/index.php/archives/502/
21.vue.js 指令函数的简写形式
http://blog.zh66.club/index.php/archives/503/
22.vue.js 生命周期函数演示
http://blog.zh66.club/index.php/archives/492/
23.vue.js 中 vue-resource 基本使用
http://blog.zh66.club/index.php/archives/493/
24.vue.js品牌列表-从数据库获取列表
http://blog.zh66.club/index.php/archives/506/
25.vue.js 品牌列表 - 完成添加功能
http://blog.zh66.club/index.php/archives/508/
26.vue.js 品牌列表 - 完成删除功能
http://blog.zh66.club/index.php/archives/510/
27.vue.js 品牌列表 - 全局配置数据接口的根域名
http://blog.zh66.club/index.php/archives/512/