步骤
1、BaseDialog.vue添加动画
添加transition,命名为dialog,添加相关css
<template>
<teleport to="body">
<div v-if="show" @click="tryClose" class="backdrop"></div>
<transition name="dialog">
<dialog open v-if="show">
<header>
<slot name="header">
<h2>{{ title }}</h2>
</slot>
</header>
<section>
<slot></slot>
</section>
<menu v-if="!fixed">
<slot name="actions">
<base-button @click="tryClose">Close</base-button>
</slot>
</menu>
</dialog>
</transition>
</teleport>
</template>
<script>
export default {
props: {
show: {
type: Boolean,
required: true,
},
title: {
type: String,
required: false,
},
fixed: {
type: Boolean,
required: false,
default: false,
},
},
emits: ['close'],
methods: {
tryClose() {
if (this.fixed) {
return;
}
this.$emit('close');
},
},
};
</script>
<style scoped>
.backdrop {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100%;
background-color: rgba(0, 0, 0, 0.75);
z-index: 10;
}
dialog {
position: fixed;
top: 20vh;
left: 10%;
width: 80%;
z-index: 100;
border-radius: 12px;
border: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 0;
margin: 0;
overflow: hidden;
background-color: white;
}
header {
background-color: #3a0061;
color: white;
width: 100%;
padding: 1rem;
}
header h2 {
margin: 0;
}
section {
padding: 1rem;
}
menu {
padding: 1rem;
display: flex;
justify-content: flex-end;
margin: 0;
}
.dialog-enter-from,
.dialog-leave-to {
opacity: 0;
transform: scale(0.8);
}
.dialog-enter-active {
transition: all 0.3s ease-out;
}
.dialog-leave-active {
transition: all 0.3s ease-in;
}
.dialog-enter-to,
.dialog-leave-from {
opacity: 1;
transform: scale(1);
}
@media (min-width: 768px) {
dialog {
left: calc(50% - 20rem);
width: 40rem;
}
}
</style>
2、App.vue改造router-view(注意将被包裹的组件改为单节点才能支持transition)
<template>
<the-header></the-header>
<router-view v-slot="slotProps">
<transition name="route" mode="out-in">
<component :is="slotProps.Component"></component>
</transition>
</router-view>
</template>
<script>
import TheHeader from "./components/layout/TheHeader.vue"
export default {
components: {
TheHeader,
},
};
</script>
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");
* {
box-sizing: border-box;
}
html {
font-family: "Roboto", sans-serif;
}
body {
margin: 0;
}
.route-enter-from {
opacity: 0;
transform: translateX(-30px);
}
.route-leave-to {
opacity: 0;
transform: translateX(30px);
}
.route-enter-active{
transition: all 0.3s ease-out;
}
.route-leave-active {
transition: all 0.3s ease-in;
}
.route-enter-to,
.route-leave-from{
opacity: 1;
transform: translateX(0);
}
</style>
标签:Adding,Route,transition,transform,leave,dialog,enter,Transitions,route
From: https://blog.csdn.net/KevinHuang2088/article/details/142670389