vue中实现点击元素隐藏显示下拉动画效果

裂痕Anderson

于 2022-07-16 00:27:34 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：师说文章标签： vue.js 动画前端

本文链接：https://blog.csdn.net/m0_60414983/article/details/125814496

师说专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何在Vue.js中通过<transition>组件结合CSS实现点击元素后隐藏和显示的下拉动画效果。关键在于为<transition>设置合适的name属性，并编写相应的动画样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在需要隐藏显示的dom元素包裹一层

<transition name="moveing">
			<view  style="background-color: #fff;  " v-if="isShow" >
				        <view class="index" style=" padding: 15upx;">
				        	首页
				        </view>
				        <view :class="show?'deep':'babble'" style="padding: 15upx;  " @click="show=!show" >
				        	会员中心 ▼
				        </view>
						
						<view class="smloginBox" style="padding: 10upx; background-color: #efefef;" v-show="show">
							<view class="smLogin">
								☝ 登录
							</view>
							<view class="smRegister" >
								✍ 注册
							</view>
						</view>
						
			</view>	
			</transition>

css里写动画样式

.moveing-enter-active{}

其中.moveing是可以自己命名的

如果命名在dom元素里要添加name=自定义命名

也可以是

.v-enter-active{}

则不需要添加name属性

即给ransition包裹的元素添加动画

.moveing-enter-active{
		animation: move 0.5s linear;
	}
	.moveing-leave-active{
		animation: move 0.5s reverse linear;
	}
@keyframes move{
	from{
		transform: translateY(-100%);
	}
	to{
		transform: translateY(0px);
	}
}