vue之动画( 仿jquery的slideToggle动画效果 )
Vue提供了transition
组件,写法:
<transition name="box"></transition>
在进入/离开的过渡中,会有 6 个 class 切换。
v-enter
:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
v-enter-active
:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。v-enter-to
: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除),在 transition/animation 完成之后移除。v-leave
: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。v-leave-active
:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。v-leave-to
: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除),在 transition/animation 完成之后移除。
对于这些在 enter/leave 过渡中切换的类名,v- 是这些类名的前缀。使用 <transition name="box">
可以重置前缀,比如v-enter
替换为 box-enter
。
例子:( 仿jquery的slideToggle动画效果 )
效果展示
:
代码展示
:
<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>
本文作者:猫老板的豆
本文链接:https://www.cnblogs.com/bingcola/p/16499233.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」