静止时
点击时展开动画
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;}}
