1、父级结构
<template>
<div @click="handleOpen"></div>
<child :show-child="showChild"></child>
</template>
<script>
import child from './child';
export default{
data(){
return{showChild:false}
},
components:{child},
motued(){
},
methods:{
handleOpen(){ this.showChild = true; }
}
}
</script>
2、子级结构
<template>
<transition name="slide-down">
<div v-if="showChild"></div>
</transition>
</template>
<script>
export default{
porps:{showChild:Boolean},
data(){
return{}
}
}
</script>
<style>
/* // bounce */
.bounce-enter-active {
animation: bounce-in 0.5s;
}
.bounce-leave-active {
animation: bounce-in 0.5s reverse;
}
@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
/* // down */
.slide-down-enter-active {
transition: all 0.4s ease;
}
.slide-down-leave-active {
/* transition: all 0.4s cubic-bezier(1, 0.5, 0.8, 1); */
transition: all 0.4s;
}
.slide-down-enter,
.slide-down-leave-active {
transform: translateY(20px);
opacity: 0;
}
.slide-down-move {
transition: all 0.4s;
}
.slide-down-leave-active {
/* position: absolute !important;
width: 100%; */
}
/* // up */
.slide-up-enter-active {
transition: all 0.5s ease 0.3s;
}
.slide-up-leave-active {
transition: all 0.5s ease;
}
.slide-up-enter,
.slide-up-leave-active {
transform: translateY(-20px);
opacity: 0;
}
.slide-up-move {
transition: all 0.5s;
}
/* // left */
.slide-left-enter-active {
transition: all 0.5s ease;
}
.slide-left-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-left-enter {
transform: translateX(20px);
opacity: 0;
}
.slide-left-leave-active {
transform: translateX(-20px);
opacity: 0;
}
.slide-left-move {
transition: all 0.5s;
}
/* // right */
.slide-right-enter-active {
transition: all 0.5s ease;
}
.slide-right-leave-active {
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-right-enter {
transform: translateX(-20px);
opacity: 0;
}
.slide-right-leave-active {
transform: translateX(20px);
opacity: 0;
}
.slide-right-move {
transition: all 0.5s;
}
/* // fade */
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-active {
opacity: 0;
}
.fade-move {
transition: transform 0.3s;
}
</style>
-------------------------------------------------------------------------------------------------------------------------------------------------------
end~
