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也不是其子元素，则关闭div
 	handleClickOutside(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;
        }
    }