CSS - 搜刮框小动效

1. 点击搜索框动画变长，搜索框有内容不变，无内容失去焦点，变回原来模样。
3. <div :class="type == true ? 's_r_z' : 's_r'" @click="onChange">
4.      <div class="input_s"><input @blur="handleBlur" v-model="input" required placeholder="请输入关键词搜索" /></div>
5.      <img src="../../../../assets/images/v_15.png" />
6. </div>
7. mounted() {
8.         // 监听全局点击事件
9.         window.addEventListener('click', this.handleClickOutside);
10.     },
11. beforeDestroy() {
12.       // 组件销毁前移除监听事件
13.      window.removeEventListener('click', this.handleClickOutside);
14. },
15. methods: {
16. // 如果点击事件的目标不是打开的div也不是其子元素，则关闭div
17.         handleClickOutside(event) {
18.        if (!this.$el.contains(event.target) && this.type && this.input == '') {
19.            this.type = false;
20.        }
21.            },
22.            onChange() {
23.        this.type = true
24.     },
25. }
27. .s_r {
28.         display: flex;
29.         width: 62px;
30.         height: 30px;
31.         background: #E3F1FF;
32.         border-radius: 20px;
33.         cursor: pointer;
34.         margin: 0px 0px 0px 30px;
35.         margin-top: -7px;
36.         transition: all 1s ease-in-out;
37.         -webkit-transition: width 1s;
39.         img {
40.             width: 20px;
41.             height: 20px;
42.             position: relative;
43.             left: 20px;
44.             top: 5px;
45.         }
47.         input {
48.             display: none;
49.         }
50.     }
52.     .s_r_z {
53.         display: flex;
54.         justify-content: center;
55.         align-items: center;
57.         width: 240px;
58.         height: 30px;
59.         background: #E3F1FF;
60.         border-radius: 20px;
61.         border: 1px solid #258DEC;
62.         animation: kx 0.5s;
63.         margin: 0px 0px 0px 30px;
64.         margin-top: -8px;
65.         img {
66.             width: 20px;
67.             height: 20px;
68.         }
70.         input {
71.             outline-style: none;
72.             border: none;
73.             background-color: #E3F1FF;
74.             animation: zk 1s;
75.         }
76.     }
78.     @keyframes kx {
79.         0% {
80.             width: 0px
81.         }
83.         100% {
84.             width: 240px;
85.         }
86.     }
88.     @keyframes zk {
89.         0% {
90.             width: 0px
91.         }
93.         100% {
94.             width: 200px;
95.         }
96.     }

复制代码