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

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

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

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

大小受限 清晰度不够

静态收缩前

收缩后

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>

3. 撰写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;
}

4. 测试效果

• 如果下方有DOM元素，则需要给下方的DOM元素进行相对定位

position: relative;

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

z-index:99;

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

点赞转发收藏支持 感谢