1、需求说明
移动端开发中,用户点击标签元素实现右侧滑出页面
2、效果图
3、源码实现
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" /> -->
<button @click="nav = true">跳转</button>
<div class="m-navbar" v-if="nav" @click="nav = false"></div>
<transition name="nav"> <div class="m-navba" v-if="nav"></div> </transition>
</div>
</template>
<script>
// import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "App",
components: {
// HelloWorld,
},
data() {
return {
nav: false,
};
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
/* 遮罩层 */
.m-navbar {
position: fixed;
left: -3px;
top: 0;
bottom: 0;
right: 0;
background-color: #000;
opacity: 0.5;
z-index: 2;
}
/* 存放弹框内容 */
.m-navba {
position: absolute;
left: 100px;
right: 0;
top: 0;
bottom: 0;
background-color: #fff;
z-index: 1000;
}
.nav-leave {
/* 定义 出场动画的 起始状态 */
/* 只停留一帧 */
transform: translateX(0px);
}
.nav-leave-active {
/* 定义 出场动画 过程 */
transition: all 0.4s ease;
}
.nav-leave-to {
/* 定义 出场动画 结束状态(即:该动画要达到的目标状态) */
transform: translateX(600px);
}
/* 定义 入场动画 */
.nav-enter {
/* 定义 入场动画 的起始状态 */
transform: translateX(600px);
}
.nav-enter-active {
/* 定义 入场动画 过程 */
transition: all 0.4s ease;
}
.nav-enter-to {
/* 定义 入场动画 过程 */
/* 只停留一帧 */
transform: translateX(0px);
}
</style>