vue 一个div的展开与搜索动画
时间: 2023-11-27 07:54:18 浏览: 35
对于Vue中一个div的展开和搜索动画,可以使用Vue的过渡动画来实现。具体步骤如下:
1. 在template中定义一个样式和一个过渡组件
```
<div>
<input type="text" v-model="searchText"> //搜索框
<transition name="expand"> //过渡组件
<div v-if="isOpen">
// 展开的内容
</div>
</transition>
</div>
<style>
/* 定义展开时的样式 */
.expand-enter-active {
transition: all 0.5s;
height: 0;
}
.expand-enter-to {
height: auto;
}
.expand-leave-active {
transition: all 0.5s;
height: auto;
}
.expand-leave-to {
height: 0;
}
</style>
```
2. 在data中定义isOpen和searchText变量
```
data() {
return {
isOpen: false,
searchText: ''
}
}
```
3. 在methods中定义toggleOpen方法用来切换isOpen的值
```
methods: {
toggleOpen() {
this.isOpen = !this.isOpen;
}
}
```
4. 监听searchText的变化,在searchText发生变化的时候切换isOpen的值。
```
watch: {
searchText(val) {
if (val === '') {
this.isOpen = false;
} else {
this.isOpen = true;
}
}
}
```
这样,当搜索框中有值的时候,展开内容会自动展开,搜索内容为空时,内容会自动收起。同时,由于使用了Vue的过渡效果,展开和收起会有动画效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)