用 vue+elemnet ui实现仿有赞首页搜索框点击放大input并展开下拉盒子的动画效果

静止时

点击时展开动画

html结构

          <el-popover placement="bottom" title="最近搜过" width="280" trigger="focus" class='pop' :visible-arrow='false'style="top: 47px;" @show='show_z' @hide='hiden'><div class="del"><i class="el-icon-delete delete"></i><span>清除</span></div><div class="text">下拉内容</div><el-input v-model="search" placeholder="搜索词" style="width: 145px;height: 58px;" slot="reference"@keyup.enter.native="gotosearch" @click="change_s" clearable><i slot="suffix" class="el-input__icon el-icon-search" @click="gotosearch" style="cursor: pointer "></i></el-input></el-popover>

css样式

::v-deep .el-input {// padding-top: 8px;// margin-left: 240px;margin-right: 17px;position: relative;input {width: 149px;height: 60px;background-color: #f7f8fa;border: solid 1px #ebedf0;border-bottom: 0;border-top: 0;}input:focus {position: absolute;animation: mymove 1s infinite;animation-iteration-count: 1;animation-fill-mode: forwards;width: 280px;background-color: #fff;border: solid 1px #ebedf0;}.el-icon-search {position: absolute;right: 15px;}
::v-deep .el-input {margin-right: 17px;animation-iteration-count: 1;z-index: 999;input:focus {position: absolute;animation: mymove 1s infinite;animation-iteration-count: 1;animation-fill-mode: forwards;width: 280px;background-color: #fff;border: solid 1px #ebedf0;}input {animation: mymove1 1s infinite;animation-iteration-count: 1;}
}
@keyframes mymove {0% {transform: translateX(-80px);width: 147px;}100% {transform: translateX(-80px);width: 280px;}
}
@keyframes mymove1 {0% {transform: translateX(-80px);width: 280px;}100% {transform: translateX(0px);width: 147px;}
}

el-popover的样式需要在挂载#app的最外层修改（跟body同级）

.el-popover {top: 47px !important;// left: 64% !important;z-index: 98;margin-top: 0;height: 135px !important;padding: 15px !important;animation: mymove 1s infinite;animation-iteration-count: 1;.text {// padding: 5px !important;padding-top: 0 !important;a {display: block;float: left;font-size: 16px;color: #333333;text-decoration: none;margin-bottom: 10px;margin-right: 20px;}}
}
@keyframes mymove {0% {width: 147px;}100% {width: 280px;}
}

用 vue+elemnet ui实现仿有赞首页搜索框点击放大input并展开下拉盒子的动画效果相关推荐

Vue+element ui上传图片和视频并回显，点击放大查看和播放
1.上传图片 html代码: <el-uploadaction="#":auto-upload="false":on-change="handl ...
高仿QQ即时聊天软件开发系列之三登录窗口用户选择下拉框
上一篇高仿QQ即时聊天软件开发系列之二登录窗口界面写了一个大概的布局和原理这一篇详细说下拉框的实现原理先上最终效果图一开始其实只是想给下拉框加一个placeholder效果,让下拉框在未选择未输 ...
Vue 学习——表格列表数据显示百分号%、显示数字改为自定义内容、数据表头下拉、点击筛选数据
目录 Vue 格式formatter 1.Vue表格列表数据显示百分号% 2.Vue显示数字改为自定义内容 Vue element-ui 数据表头下拉,点击筛选数据 Vue 格式formatter 初 ...
【Android自定义控件】仿IOS风格的搜索框
iOS很多控件的设计都是很值得借鉴的存在,作为移动开发的初学者,我们可以把这种模仿等同于学画.练字时为铸就基础的临摹行为.达者为师,努力学习别人的优点吧. 这里是仿IOS搜索框风格的自定义控件,引用 ...
vue+element ui实现树形表格加复选框（checkbox）
element ui中有带复选框的表格和树形数据的表格,不过呢,wo遇到一个新的需求,其中就是要实现树形表格和复选框的结合,尝试过很多方法,最后自己总结出一套,实现了全选,单选,多选. 效果图: 代码 ...
iOS仿写有妖气漫画、视频捕获框架、启动页广告页demo、多种动画效果等源码
iOS精选源码以tableview的section为整体添加阴影效果/ta'b'le'vi'e'w顶部悬浮-. 一个可以轻松应用自定义过滤器的视频捕获框架. 基于UITableView的组件,旨在显 ...
iOS仿写有妖气漫画、视频捕获框架、启动页广告页demo、多种动画效果等源码...
iOS精选源码以tableview的section为整体添加阴影效果/ta'b'le'vi'e'w顶部悬浮.... 一个可以轻松应用自定义过滤器的视频捕获框架. 基于UITableView的组件,旨 ...
Android 仿网易一元夺宝客户端下拉加载动画实现(一)
上上周写的一个demo,仿照网易一元夺宝的下拉刷新效果. 原效果是(第一部分)一个小太阳拉下来,然后松开回弹上去, (第二部分)再掉下来一个硬币进行中轴旋转. 本文实现的效果的是第一部分的,效果演示图 ...
高仿IOS下拉刷新的粘虫效果
最近看需要做一款下拉刷新的效果,由于需要和Ios界面保持一致,所以这用安卓的方式实现了ios下的下拉刷新的粘虫效果. 最新的安卓手机版本的QQ也有这种类似的效果,就是拖动未读信息的那个红色圆圈,拖动近 ...

用 vue+elemnet ui实现仿有赞首页搜索框点击放大input并展开下拉盒子的动画效果

用 vue+elemnet ui实现仿有赞首页搜索框点击放大input并展开下拉盒子的动画效果相关推荐

最新文章

热门文章