CSS - 搜索框小动效

点击搜索框动画变长，搜索框有内容不变，无内容失去焦点，变回原来模样。<div :class="type == true ? 's_r_z' : 's_r'" @click="onChange"><div class="input_s"><input @blur="handleBlur" v-model="input" required placeholder="请输入关键词搜索" /></div><img src="../../../../assets/images/v_15.png" /></div>mounted() {// 监听全局点击事件window.addEventListener('click', this.handleClickOutside);},beforeDestroy() {// 组件销毁前移除监听事件window.removeEventListener('click', this.handleClickOutside);},methods: {// 如果点击事件的目标不是打开的div也不是其子元素，则关闭divhandleClickOutside(event) {if (!this.$el.contains(event.target) && this.type && this.input == '') {this.type = false;}},onChange() {this.type = true},
}.s_r {display: flex;width: 62px;height: 30px;background: #E3F1FF;border-radius: 20px;cursor: pointer;margin: 0px 0px 0px 30px;margin-top: -7px;transition: all 1s ease-in-out;-webkit-transition: width 1s;img {width: 20px;height: 20px;position: relative;left: 20px;top: 5px;}input {display: none;}}.s_r_z {display: flex;justify-content: center;align-items: center;width: 240px;height: 30px;background: #E3F1FF;border-radius: 20px;border: 1px solid #258DEC;animation: kx 0.5s;margin: 0px 0px 0px 30px;margin-top: -8px;img {width: 20px;height: 20px;}input {outline-style: none;border: none;background-color: #E3F1FF;animation: zk 1s;}}@keyframes kx {0% {width: 0px}100% {width: 240px;}}@keyframes zk {0% {width: 0px}100% {width: 200px;}}