css3 updown 动画,Vue的transition中的slidedown,slideUp展开收起动画
vue transition动画
vue的transition过渡动画在vue官网已有详细教程,就不赘述了。然而当我们使用transition来实现slidedown,slideup的展开收起动画时,就会发现没有过渡动画,是transition失灵了吗?
当然不是,是因为css3的transition动画需要知道两个信息,开始状态,结束状态。
如上图的点击实现slideup的收起动画,外层div一般高度都是自动的,在transition过程中,css3只知道结束状态是 height:0;
而不知道开始状态 height: **px。所以才没有显示过渡动画。
transition实现slidedown,slideup的方法。
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:after-enter="afterEnter"
v-on:enter-cancelled="enterCancelled"
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled">
transition除了最常用的方法,还提供了回调钩子的方法。对于slideup的动画,我们要做的就是在beforeEnter钩子回调里面对容器div设置高度为具体数值,
然后在enter中修改height数值为0,那么就能实现slideup的动画过渡了。methods:{
beforeEnter(el){
el.className=el.className+' my-transition';
el.style.height = '0';
// 缺少处理了 overflow:hidden 样式的添加,完整组件需要添加此处理,在动画结束后恢复原来的oveflow样式。
},
enter(el){
el.style.height = el.scrollHeight + 'px';
},
afterEnter(el){
el.className=el.className.replace("my-transition",'');
el.style.height = '';
},
enterCancelled(el){
},
beforeLeave(el){
el.style.height = el.scrollHeight + 'px';
},
leave(el){
let ht=el.scrollHeight;
el.className=el.className+' my-transition';
el.style.height = 0;
},
afterLeave(el){
el.className=el.className.replace("my-transition",'');
el.style.height = '';
},
leaveCancelled(el){
}
}
这其中,我们用到了scrollHeight来获取元素的高度,对于没有滚动条的元素div,此属性有一个特性,即是div的display:none时,也能获取到div完全展现时的高度。是一个取巧的方法。
细心的你一定还注意到了一个className 为 'my-transition',它是设置css transition过渡的关键。.my-transition{transition: .3s height ease-in-out/* , 10.5s padding-top ease-in-out, 10.5s padding-bottom ease-in-out */}
没错,他主要设置了transition属性,来实现transition动画。
结语:
vue的slidedown,slideup的动画是不是只有这一种实现方式呢。条条大路通罗马,肯定有很多中方式,比如animation动画。我们还可以使用vue的状态过渡动画,这可能就需要用到第三方库tween.js了。
css3 updown 动画,Vue的transition中的slidedown,slideUp展开收起动画相关推荐
- 收起 展开 循环 php,CSS3 实现侧边栏展开收起动画
这篇文章主要介绍了如何使用CSS3 实现侧边栏展开收起动画,并附上了示例代码,非常的详细,推荐给需要的小伙伴. @keyframes 规则用于创建动画. @keyframes 中规定某项 CSS 样式 ...
- 【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性 展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
- html左侧菜单展开与收起,CSS3 实现侧边栏展开收起动画
@keyframes 规则用于创建动画. @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不 ...
- android窗口退出动画,如何在Android中为弹出窗口制作动画
PopupWindow自定义布局更方便,并且显示位置自由,没有任何限制.使用下面的代码并享受动画.在此动画中,使用底部滑入和滑出,但是您只能更改滑入/滑出动画,并根据您的动画对应用程序中的任何位置进行 ...
- ios 圆形旋转菜单_iOS高级动画:圆形树展开收起动画
转自:标哥的技术博客,作者:黄仪标(微博) 前段时间帮某某做了一个动画效果,今天分享给大家.关于动画的基础知识,这里不会细说,如果您还没有核心动画的基础知识,请先阅读相关文章,了解核心动画如何使用,然 ...
- JQuery 向下展开收起动画( slideDown(),slideUp() )
$('#div1').slideDown(1000); //向下展开,下拉.1000毫秒,表示动画展开过程时间. $('#div1').slideUp(1000); //向上收起 $('#div1 ...
- vue收缩面板_vuejs实现折叠面板展开收缩动画
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画. 循环列表,html: {{item.content}} [展开] [收缩] 在css上加上动画transit ...
- JQuery 动画滑动显示和隐藏方式 slideDown\slideUp\slideToggle
滑动显示和隐藏方式 slideDown([speed], [easing],[fn]) slideup( [ speed, [easing],[fn]]) slideToggle([speed], [ ...
- 基于vue渐变展开收起盒子动画(盒子高度不定)
基于vue展开收起盒子动画(盒子高度不定) 问题: transition动画只能对高度给定的盒子,在高度变化时实现展开收起动画.对于不定高度的盒子,transition无能为力 解决方案: 小白入门, ...
最新文章
- Android基础知识之Manifest文件的组织结构
- Vue2.0 探索之路——生命周期和钩子函数的一些理解
- redis学习-02
- my wordpress
- 别为了学编程而学编程
- Codeforces 1284E New Year and Castle Building (计算几何)
- find命令的技巧和一些例子
- i++与++i的区别
- Flash动画中按钮的八个动作
- 《网上订餐系统》开发全程回忆
- 微信小程序多音频场景处理
- vue项目上线后服务器资源更新而浏览器有缓存不更新
- RationalDMIS 2020旋转坐标系
- 对话主线科技CEO张天雷:完成A轮融资,自动驾驶战略、战术全透视
- SQL Server - 数据库(创建,修改管理-删除)-T-SQL 语句
- 自动抓取app数据的攻与防
- 做了一个网页版的串口调试助手
- Intel深度摄像头RealSense D435(实感双目摄像头)和目标检测结合使用
- USB转串口芯片 FT232RL/CH9101/PL2303/CY7C65213同类型芯片参数对比
- 程序员代码表白 爱你三千遍
热门文章
- 软件科技理学硕士学位(香港理工大学)
- VisualGDB 5.6 r4 Retail
- arch linux grub引导修复
- OpenStack架构详解
- python函数封装计算n_python | 高效使用统计语言模型kenlm:新词发现、分词、智能纠错等...
- 创建带界面UI的Activex
- python大学考试题型这一篇就够了
- 【Python】WPS、Excel表格处理(二) xlwt模块(xlsxwriter模块)
- 触动精灵 python,[触动精灵]零基础小白学触动5-8
- 雨心触动精灵VIP教程