VUE实现折叠展开动画效果

第一种情况：从中间向两边展开效果（水平缩放）

.input-search {position: absolute;bottom: 8px;right: 0px;width: auto;animation: mymove 0.5s infinite;animation-iteration-count: 1;border: none;.el-input__inner {border-radius: 4px 0 0 4px;}
}
@keyframes mymove {from {transform: scaleX(0);}to {transform: scaleX(1);}
}

效果如图：

折叠搜索框

第二种：从右往左展开效果（改变元素宽度）

.inputDiv {width: auto;height: 32px;position: absolute;bottom: 8px;right: 0px;border-radius: 4px;overflow: hidden;animation: mymove 0.3s infinite;animation-iteration-count: 1;.input-search {width: auto;border: none;.el-input__inner {border-radius: 4px 0 0 4px;}}
}
@keyframes mymove {from {width: 0px;}to {width: 213px;}
}

效果如图：

折叠搜索框

VUE实现折叠展开动画效果相关推荐

前端进阶必备技能：Vue中如何定制动画效果
作为前端程序员,前端火起来的短短几年里技术更新迭代特别快,不仅是新的框架繁多,Vue,React,Angular轮番上场,各种工具,插件,库也是琳琅满目,就连基础的JavaScript语法的更新也是年 ...
jQuery 设计和自定义一个带展开动画效果的导航栏
设计和自定义一个带展开动画效果的导航栏,尝试写了一个demo,加上设计和调试差不多写了一天吧. 这里就来讲讲如何从设计->写布局->写样式->写JS代码完成一个完全自己设计的导航栏 ...
京东css3动画全屏海报_CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
最近在做项目时,发现CSS3中关于动画的技术,自己很少运用在项目中,平时一些列表块的收缩和展开动画效果,几乎都是使用 display 的 none 和 block,或者 visibility 的 hi ...
html卷轴展开动画,MAYA制作北京奥运卷轴展开动画效果
本教程是向脚本之家的朋友介绍利用MAYA制作北京奥运卷轴展开动画效果.教程难度一般.希望脚本之家的朋友们喜欢这篇教程.先看看最终的效果图: 具体制作步骤如下: 1.建一个nurbs面片,u轴向增加一定 ...
Android—ListView Item 展开动画效果
Android-ListView Item 展开动画效果最近在做一个关于ListView item的展开效果,类似于 "粮仓" App 的商店页面,点击Item,展开显示子Vie ...
直播系统源代码实现RecyclerView折叠展开动画
直播系统源代码实现RecyclerView折叠展开动画的相关代码首先来看看布局文件 <?xml version="1.0" encoding="utf-8&quo ...
element-ui之el-collapse-transition（折叠展开动画）源码解析学习
2019独角兽企业重金招聘Python工程师标准>>> 项目中发现同事使用了element-ui的el-collapse-transition来做折叠展开效果,打开源码看了下发现挺有 ...
运用css3新属性transform写的盒子嵌套展开动画效果
刚刚进园,第一篇博客,记录一下CSS3 绘制盒子效果的方法. css3允许使用 3D 转换来对元素进行格式化,转换是使元素改变形状.尺寸和位置的一种效果,3D转换可以通过设置transform的属性值 ...
html5点击展开动画效果,jquery展开收缩扑克牌动画效果教程
Baraja是一个很有趣的jQuery插件.它允许你像在桌子上摊开扑克牌一样将元素展开和收缩.它使用CSS transforms来旋转和translate这些元素.它使用几个可用参数来控制各种不同的展 ...

VUE实现折叠展开动画效果

VUE实现折叠展开动画效果

VUE实现折叠展开动画效果相关推荐

最新文章

热门文章