Vue过渡实现 类似 jQuery slideUp
slideDown
显示隐藏效果
jQuery流行库
的显示隐藏等等过渡动画很美好,但是我们的Vue中并不是很建议使用jQuery
,在不使用jQuery
的情况下,有什么方法能够实现呢?- 如何使用 Vue过渡 与 css 实现类似
jQuery
的slide
系列滑动显示隐藏动画?
为了确保这是您需要的动画,先上动图和展示
大小受限 清晰度不够
静态收缩前
收缩后
- 使用
<transition>
标签将要执行过渡的DOM包裹起来 - 使用
v-show
指令绑定<transition>
中的根元素,这里我用的是这种方法,点击按钮后执行this.strWindow = !this.strWindow
实现v-show
的显示隐藏
<transition name="fade">
<div class="userdata" v-show="strWindow">
<!--以下DOM结构为我项目中的结构,只作为例子使用,直接复制会因为缺少数据和样式而报错-->
<div class="view" @click="goOverview('chat')">
<p class="num">{{userdata.chat}}</p>
<p class="name">沟通中</p>
</div>
<div class="view" @click="goOverview('interview')">
<p class="num">{{userdata.interview}}</p>
<p class="name">待面试</p>
</div>
<div class="view" @click="goOverview('offer')">
<p class="num">{{userdata.offer}}</p>
<p class="name">录用</p>
</div>
<div class="view" @click="goOverview('star')">
<p class="num">{{userdata.star}}</p>
<p class="name">收藏</p>
</div>
</div>
</transition>
- 撰写css样式
/* 设置过渡,只过渡maxheight */
.fade-leave-active ,.fade-enter-active{
transition:max-height 0.6s;
}
/* 使其动作enter后和leave前,高度为0 */
.fade-enter, .fade-leave-to {
max-height:0px;
}
/* 使其enter前和leave后,高度为100px */
.fade-enter-to, .fade-leave{
max-height:100px;
}
- 测试效果
- 如果下方有DOM元素,则需要给下方的DOM元素进行
相对定位
position: relative;
- 上方的DOM元素请设置
z-index
属性大于本过渡元素,以免出现滑动时向上覆盖的情况
z-index:99;
- 上下方向的
padding
和margin
也许会影响过渡效果,请根据实际需要进行修改