[Vue.js]学习笔记-Vue.js过渡&动画-显性的过渡持续时间

范范

[Vue.js]学习笔记-Vue.js过渡&动画-显性的过渡持续时间

导读部分

---

讨论区：http://www.sufeinet.com/forum-58-1.html

教程目录：http://www.sufeinet.com/thread-24026-1-1.html

教程部分

---

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

在很多情况下，Vue 可以自动得出过渡效果的完成时机。

默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种情况下你可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

[HTML] 纯文本查看 复制代码

<transition :duration="1000">...</transition>

你也可以定制进入和移出的持续时间：

[HTML] 纯文本查看 复制代码

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

Amy

强烈支持楼主ing……

liu

强烈支持楼主ing……

竹林风

感恩无私的分享与奉献

站长苏飞

我只是路过打酱油的。

惜

看到这帖子真是高兴！