1.効果
2、Vue コード
<template>
<div id="app">
<!-- 左侧划出区域 -->
<transition>
<div class="leftCotent" v-if="isLeftShow">左侧划出内容</div>
</transition>
<!-- 主体区域 -->
<div
class="main"
:class="{ isLeft: isLeftShow === false }"
@click="isLeftShow = false"
>
<van-icon name="qr" @click.stop="isLeftShow = !isLeftShow" />
<!-- <van-icon name="qr" @click="hander" /> -->
主页区域
</div>
</div>
</template>
<script>
export default {
data () {
return {
isLeftShow: false
}
},
mounted () {
},
methods: {
}
}
</script>
<style lang="less">
#app {
.v-enter,
.v-leave-to {
/* 在动画中加入位移 */
transform: translateX(
-70vw
); /* smyhvae提示:v-enter表示,一开始让DOM元素处于靠右80px的位置 */
}
/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active {
transition: all 0.95s ease; /*期间,设置过渡的属性:all表示所有的属性、时间为1秒、过渡的状态*/
}
overflow: hidden;
.leftCotent {
position: absolute;
left: 0;
background-color: aqua;
width: 70vw;
height: 100vh;
}
.main {
position: absolute;
left: 70vw;
width: 100vw;
height: 100vh;
background-color: antiquewhite;
transition: all 1s ease;
.van-icon {
font-size: 40px;
}
}
.isLeft {
left: 0;
}
}
</style>