Vue.js 教程 (9) : 过渡动画
发布在Vue.js 中文入门2014年2月26日view:23853
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

Vue.js 提供非常简单的过渡动画接口。这些过渡动画在 Vue.js 将目标元素插入或移除出 DOM 的时候会自动执行。能够触发动画的指令包括 v-if, v-showv-repeat。同时,vm 实例的 $appendTo(), $before(), $after()$remove() 方法也会触发动画。

定义动画的方法有三种:

  1. CSS transition
  2. CSS animation
  3. JavaScript 函数

CSS Transition

要使用 CSS Transition 动画,只需要在目标元素上添加 v-transition 指令:

<p class="msg" v-if="show" v-transition>Hello!</p>

然后,你需要为目标元素定义两个 CSS 类:.v-enter.v-leave. 这其中:

  • .v-enter 代表元素刚刚被插入 DOM 瞬间的状态。它会在插入前被添加,然后 Vue.js 会强制浏览器刷新视图,然后 v-enter 会被立刻移除,从而触发 transition。
  • .v-leave 代表元素即将被从 DOM 中移除的瞬间的状态。Vue.js 会在侦听到 transitionend 事件以后移除它。

需要注意的是你得确保该元素在添加这两个类的时候会触发 CSS transition,不然 Vue.js 侦听不到 transitionend 事件,动画就卡在那里了。

.msg {
    transition: all .3s ease;
    height: 30px;
    padding: 10px;
    background-color: #eee;
    overflow: hidden;
}
.msg.v-enter, .msg.v-leave {
    height: 0;
    padding: 0 10px;
    opacity: 0;
}

现在,当 show 变化的时候,Vue.js 会插入/移除该元素,并自动在合适的时候添加 CSS 类。效果:http://jsfiddle.net/yyx990803/7Q9ss/

CSS Animation

CSS Animation 使用方式和 transition 大同小异,换成使用 v-animation 指令,不同的地方是 v-enter 现在不是在插入后立刻移除,而是在侦听到 animationend 事件后才移除。

<p class="animated" v-if="show" v-animation>Look at me!</p>

CSS 里你需要定义两个动画 keyframes,分别对应进场和出场动画:(这里省略了webkit前缀)

.animated {
    display: inline-block;
}

.animated.v-enter {
    animation: fadein .5s;
}

.animated.v-leave {
    animation: fadeout .5s;
}

@keyframes fadein {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes fadeout {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(0);
    }
}

效果:http://jsfiddle.net/yyx990803/XLxpb/

JavaScript 函数动画

JS 函数动画需要通过 Vue.effect 方法来注册一个效果,包括一个进场函数和一个出场函数:

Vue.effect('my-effect', {
    enter: function (el, insert, timeout) {
        // insert() 会将元素插入 DOM
    },
    leave: function (el, remove, timeout) {
        // remove() 会将元素移除出 DOM
    }
})
<p v-effect="my-effect"></p>

第三个参数 timeout 是一个 Vue.js 版本的 setTimeout 函数。使用方法完全一样,但使用这个函数的好处是,当一个元素的状态切换过快,上一个动画函数设置的 timer 还没有触发就进入下一个动画函数的时候, Vue.js 会确保之前未触发的 timer 都被取消,不需要开发者手动管理 timer。

最后上一个 v-repeat + CSS Animation 的效果:http://jsfiddle.net/yyx990803/3phyQ/

评论
发表评论
2年前

其实可以用Vueg插件,直接use后就可以获得页面转换的transition效果

4年前

学习渐变中,但是上面jsfiddle上的例子不管用了,不知道为什么

4年前
赞了此文章!
6年前

@雷欧尼克斯 可以考虑哈。过段时间会先在 InfoQ 上发一篇关于 Vue.js 开发思路的文章,之后计划在英文官博连载内部实现细节的文章,到时候争取在这里同步发中文版。

6年前

已经读了几天 有些接口非常精致 是不是考虑写完教程再来个源码分析什么的

6年前

@题叶 是的。Vue 本身只提供钩子,这样比较灵活。

6年前

CSS 在具体应用里是要自己写吗, 而不是 Vue 框架里提供的?

WRITTEN BY
尤小右
不会搞艺术的程序员不是好设计师
TA的新浪微博
PUBLISHED IN
Vue.js 中文入门

Vue.js 是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API,让编写动态的UI界面变得轻松简单。本专栏是Vue.js的中文版入门教程。

我的收藏