5267

Vue API 4 (过渡和动画)

<h2 class="md-end-block md-heading">transition</h2> <ul class="ul-list" data-mark="-"><li class="md-list-item"> <p class="md-end-block md-p">name 用于自动生成 CSS 过渡类名。例如:name: fade 将自动拓展为 .fade-enter ,.fade-enter-active等。默认类名为 "v"

</li> <li class="md-list-item"> <p class="md-end-block md-p">appear ,是否在初始渲染时使用过渡。默认为 false。

</li> <li class="md-list-item"> <p class="md-end-block md-p">css ,是否使用 CSS 过渡类。默认为 true。如果设置为 false,将只通过组件事件触发注册的 JavaScript 钩子。

</li> <li class="md-list-item"> <p class="md-end-block md-p">type,指定过渡事件类型,侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。

</li> <li class="md-list-item"> <p class="md-end-block md-p">mode ,控制离开/进入的过渡时间序列。有效的模式有 "out-in" 和 "in-out";默认同时生效。

</li> <li class="md-list-item"> <p class="md-end-block md-p">duration, 指定过渡的持续时间。

</li> </ul><h3 class="md-end-block md-heading">CSS 动画 animation</h3> <p class="md-end-block md-p">   CSS 动画用法同 CSS 过渡,区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend事件触发时删除。

<h3 class="md-end-block md-heading">过渡的类名</h3> <ol class="ol-list" start=""><li class="md-list-item"> <p class="md-end-block md-p">v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。

</li> <li class="md-list-item"> <p class="md-end-block md-p">v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。

</li> <li class="md-list-item"> <p class="md-end-block md-p">v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。

</li> <li class="md-list-item"> <p class="md-end-block md-p">v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。

</li> <li class="md-list-item"> <p class="md-end-block md-p">v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。

</li> <li class="md-list-item"> <p class="md-end-block md-p">v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。

</li> </ol><h3 class="md-end-block md-heading">同时使用过渡和动画(type)</h3> <p class="md-end-block md-p">   同时使用过渡和动画时,需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

<h3 class="md-end-block md-heading">显性的过渡持续时间 (duration)</h3> <p class="md-end-block md-p">   可以用 <transition> 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计):

<transition :duration="1000">...</transition> <p class="md-end-block md-p">   也可以定制进入和移出的持续时间:

<transition :duration="{ enter: 500, leave: 800 }">...</transition> <h3 class="md-end-block md-heading">JavaScript钩子函数</h3> <p class="md-end-block md-p">  可以在属性中声明 JavaScript 钩子

       <transition          v-on:before-enter="beforeEnter"          v-on:enter="enter"          v-on:after-enter="afterEnter"          v-on:enter-cancelled="enterCancelled"​          v-on:before-leave="beforeLeave"          v-on:leave="leave"          v-on:after-leave="afterLeave"          v-on:leave-cancelled="leaveCancelled"        >​        </transition>        methods: {          beforeEnter: function (el) {},          // 当与 CSS 结合使用时          // 回调函数 done 是可选的          enter: function (el, done) {            done()         },          afterEnter: function (el) {},          beforeLeave: function (el) {         },          // 当与 CSS 结合使用时          // 回调函数 done 是可选的          leave: function (el, done) {            done()         },       } <p class="md-end-block md-p">   注意:当只用 JavaScript 过渡的时候,在 enter 和 leave 中必须使用 done 进行回调。否则,它们将被同步调用,过渡会立即完成。

<p class="md-end-block md-p">  注意:推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false",Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

<h3 class="md-end-block md-heading">初始渲染的过渡(appear)</h3> <p class="md-end-block md-p">  可以通过 appear 特性设置节点在初始渲染的过渡

<h3 class="md-end-block md-heading">多个元素的过渡(key)</h3> <p class="md-end-block md-p">  对于原生标签可以使用 v-if / v-else 实现过渡,当有相同标签名的元素切换时,需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们。

<p class="md-end-block md-p">  也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else,

<p class="md-end-block md-p">  使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。

       <transition>          <button v-bind:key="docState">           {{ buttonMessage }}          </button>        </transition>        computed: {          buttonMessage: function () {            switch (this.docState) {              case 'saved': return 'Edit'              case 'edited': return 'Save'              case 'editing': return 'Cancel'           }         }       } <h3 class="md-end-block md-heading">过渡模式(mode)</h3> <ul class="ul-list" data-mark="-"><li class="md-list-item"> <p class="md-end-block md-p">in-out:新元素先进行过渡,完成之后当前元素过渡离开。

</li> <li class="md-list-item"> <p class="md-end-block md-p">out-in:当前元素先进行过渡,完成之后新元素过渡进入。

</li> </ul>        <transition name="fade" mode="out-in">          <!-- ... the buttons ... -->        </transition> <h3 class="md-end-block md-heading">多个组件的过渡</h3> <p class="md-end-block md-p">  多个组件的过渡只需要动态组件就可以实现,不需要使用 key。

<p class="md-end-block md-p"> 

<h2 class="md-end-block md-heading">transition-group</h2> <ul class="ul-list" data-mark="-"><li class="md-list-item"> <p class="md-end-block md-p">不同于 <transition>,它会以一个真实元素呈现:默认为一个 <span>。你也可以通过 tag 特性更换为其他元素。

</li> <li class="md-list-item"> <p class="md-end-block md-p">过渡模式不可用,因为我们不再相互切换特有的元素。

</li> <li class="md-list-item"> <p class="md-end-block md-p">内部元素 总是需要 提供唯一的 key 属性值。

</li> <li class="md-list-item"> <p class="md-end-block md-p">CSS 过渡的类将会应用在内部的元素中,而不是这个组/容器本身。

</li> <li class="md-list-item"> <p class="md-end-block md-p">v-move 改变定位,对于设置过渡的切换时机和过渡曲线非常有用。

</li> </ul><p class="md-end-block md-p">Vue 使用了一个叫 FLIP 简单的动画队列使用 transforms 将元素从之前的位置平滑过渡新的位置。FLIP 动画不仅可以实现单列过渡,多维网格也同样可以过渡

<p class="md-end-block md-p">注意:使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案,可以设置为 display: inline-block 或者放置于 flex 中。

来源:博客园

作者:Irelia9102

链接:https://www.cnblogs.com/yaokai729/p/11425904.html

Recommend