动画.gif
<template>
<div class="box">
<div class="button" @click="clickBtn">
<img src="./img/left.png" alt="" v-show="!show" />
<img src="./img/right.png" alt="" v-show="show" />
</div>
<div class="content">
<div>
<div>111111111111111111111111111111111</div>
<div>2222222222222222222</div>
<div>333333333333333333333333</div>
<div>444444444444</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
const show = ref(false);
const clickBtn = () => {
let div = document.getElementsByClassName("content")[0];
div.classList.toggle("content_show");
show.value = !show.value;
};
</script>
<style lang="less">
.box {
display: flex;
justify-content: end;
position: absolute;
right: 50px;
overflow: hidden;
}
.content {
width: 0px;
height: 300px;
background: skyblue;
transition: all 0.5s ease;
}
.content_show {
width: 500px;
height: 300px;
background: skyblue;
}
.button {
width: 50px;
height: 50px;
background: coral;
img {
width: 50px;
height: 50px;
}
}
</style>
