0
点赞
收藏
分享

微信扫一扫

vue之动画( 仿jquery的slideToggle动画效果 )


Vue提供了​​transition​​组件,写法:

<transition name="box"></transition>

在进入/离开的过渡中,会有 6 个 class 切换。

vue之动画( 仿jquery的slideToggle动画效果 )_vue动画

  1. ​v-enter​​:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
  1. ​v-enter-active​​:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
  2. ​v-enter-to​​: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除),在 transition/animation 完成之后移除。
  3. ​v-leave​​: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
  4. ​v-leave-active​​:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
  5. ​v-leave-to​​: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除),在 transition/animation 完成之后移除。

对于这些在 enter/leave 过渡中切换的类名,v- 是这些类名的前缀。使用 ​​<transition name="box">​​​ 可以重置前缀,比如​​v-enter​​​ 替换为 ​​box-enter​​。

例子:( 仿jquery的slideToggle动画效果 )

​效果展示​​:

vue之动画( 仿jquery的slideToggle动画效果 )_ide_02

​代码展示​​:

<template>
<div id="app">
<button v-on:click="show = !show">
slideToggle
</button>
<transition name="ul">
<ul v-if="show" class="ul-box">
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
<li>11111111111111</li>
</ul>
</transition>
</div>
</template>

<script>export default {
data() {
return {
show: false
};
}
};</script>

<style>.ul-box {
height: 300px;
overflow: hidden;
}
.ul-enter-active,
.ul-leave-active {
transition: all 0.5s;
}
.ul-enter,
.ul-leave-to {
height: 0;
}</style>


举报

相关推荐

0 条评论