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

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也许会影响过渡效果，请根据实际需要进行修改

`点赞转发收藏支持感谢`

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

vue自定义插件封装一个类似 element 中 message 消息提示框的插件
vue自定义插件封装一个类似 element 中 message 消息提示框的插件一.资源文档 1.vue内置组件 transition 2.Vue.use() 3.Vue.extend() 4. ...
js中onload和jQuery中的ready区别
js中onload和jQuery中的ready区别 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行. ------>不能写多个(如果有多个,只会执行一个) $(do ...
Vue入门之animate过渡动画效果
简介: transition方法的使用 transition内置方法 transition-group animate库实现过渡动画 `<!DOCTYPE html>` `<html ...
Vue 动画 —— 滑动切换动画 / 滑动翻页过渡动画——从顶部到底部、从底部到顶部、从左侧到右侧、从右侧到左侧
要点: 动画容器为相对定位,动画元素为绝对定位每个动画元素都需单独用 <transition></transition> 包裹来添加过渡动画效果完整演示范例代码 <t ...
js html页面切换效果,jQuery实现切换页面过渡动画效果
这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效 ...
vue中使用类似html中a标签的锚链接，实现点击定位到当前页面的某个位置
在vue中实现点击文字,定位到当前页面的某个位置,具体实现效果如下图所示: 主要实现方式为: <div @click="toJump1">定位1</div> ...
用原生JavaScript写出类似jQuery中slideUp和slideDown效果
JavaScript是本人自学的第一门语言,也是本人目前最喜欢的一门语言.由于是自学,加上没有做过任何项目(只是偶尔自己做一些小效果玩玩),所以水平不咋地,写得不好之处,欢迎各位指正. 前言在我自学 ...
jquery中ajax中的参数,jquery中的ajax参数
jquery中将ajax封装成了函数,我们使用起来非常方便,jquery会自动根据内容选择post还是get方式提交数据,并且会自动编码,但是要想完全掌握jquery中的ajax,我们必须将它的各个参 ...
html中$ 的作用,jquery中的$()是什么？
jquery中的$()是什么?$是jQuery"类"的一个别称,$()构造了一个jQuery对象.所以,"$()"可以叫做jQuery的构造函数. $()就是j ...
二、Vue（发送AJAX请求、Vue生命周期、计算属性、属性和方法、自定义指令、过渡(动画)）
一. 发送AJAX请求 1. 简介 vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现 axios是一个基于Promise的HTTP请求客户端,用 ...

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

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

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

静态收缩前

收缩后

`点赞转发收藏支持感谢`

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

最新文章

热门文章

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

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

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

静态收缩前

收缩后

点赞转发收藏支持 感谢

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

最新文章

热门文章

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

`点赞转发收藏支持感谢`