[Vue][transition]Vue中实现类似JQuery中slideUp slideDown的滑动显示隐藏过渡动画效果

Vue过渡实现 类似 jQuery slideUp slideDown显示隐藏效果

  • jQuery流行库的显示隐藏等等过渡动画很美好,但是我们的Vue中并不是很建议使用jQuery,在不使用jQuery的情况下,有什么方法能够实现呢?
  • 如何使用 Vue过渡 与 css 实现类似jQueryslide系列滑动显示隐藏动画?

为了确保这是您需要的动画,先上动图和展示

在这里插入图片描述

大小受限 清晰度不够

静态收缩前

在这里插入图片描述

收缩后

在这里插入图片描述

  1. 使用 <transition> 标签将要执行过渡的DOM包裹起来
  2. 使用 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>
  1. 撰写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;
}
  1. 测试效果
  • 如果下方有DOM元素,则需要给下方的DOM元素进行相对定位

position: relative;

  • 上方的DOM元素请设置z-index属性大于本过渡元素,以免出现滑动时向上覆盖的情况

z-index:99;

  • 上下方向的paddingmargin也许会影响过渡效果,请根据实际需要进行修改

点赞转发收藏支持 感谢

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页