可应用于小程序,app的一种搜索样式之一,此示例利用css的transition属性,通过改变class类的方法实现
直接上代码
<template>
<div class="header">
<div class="head" :class="{ head2: changeCssStatus }">
<div class="list">
<span>列表一</span>
<span>列表二</span>
</div>
<div class="text" @click="changebig">搜索</div>
</div>
<div class="search" :class="{ search2: changeCssStatus }">
<div class="css1">搜索</div>
<div style="text-align:center;flex:1;" @click="changeCssStatus=false">取消</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const changebig = () => {
changeCssStatus.value = true
}
const changeCssStatus = ref<boolean>(false)
</script>
<style lang="scss" scoped>
.text {
width: 50px;
text-align: center;
background: #666;
color: white;
}
.css1 {
width: 150px;
background: #666;
}
.head {
width: 100%;
display: flex;
transition: width 0.3s ease-out;
overflow: hidden;
}
.head2 {
width: 0;
overflow: hidden;
}
.header {
margin: 0 auto;
width: 230px;
padding: 5px 10px;
box-sizing: border-box;
display: flex;
height: 30px;
overflow: hidden;
border-bottom: 1px solid red;
.list {
display: flex;
width: 180px;
text-align: center;
span {
width: 50%;
}
}
.search {
width: 0;
overflow: hidden;
display: flex;
}
.search2 {
width: 100%;
overflow: hidden;
transition: width 0.3s ease-in-out;
}
}
</style>
我使用的是vue3,但和vue2差不多呢
补上效果:
f13eb3c1bb81e6f3894407e5826493