reference answer:
@keyframes dialog-fade-in {
0% {
transform: translate3d(0, 100%, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, -100%, 0);
opacity: 0;
}
}
just copy the two animations where you need them.
attach the complete code:
<template>
<div>
<el-dialog :visible.sync="isShown">
<div> 111111 </div>
</el-dialog>
<el-button type="primary" @click="changeStatus"></el-button>
</div>
</template>
<script>
export default {
data () {
return {
isShown: false
}
},
methods: {
changeStatus: function () {
if (this.isShown) {
this.isShown = false
} else {
this.isShown = true
}
}
}
}
</script>
<style>
@keyframes dialog-fade-in {
0% {
transform: translate3d(0, 100%, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(0, -100%, 0);
opacity: 0;
}
}
</style>
effect picture:
implementation instructions:
reference source code: https://github.com/ElemeFE/el., because dialog has already used animation effects, you only need to overwrite the animation of the source code on this basis. This is the way I came up with. If others have other ways, you are welcome to communicate.
.my-base-info .dialog-fade-enter-active {
animation: my-dialog-fade-in 0.3s;
}
.my-base-info .dialog-fade-leave-active {
animation: my-dialog-fade-out 0.3s;
}
@keyframes my-dialog-fade-in {
0% {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes my-dialog-fade-out {
0% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
100% {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
}
you can cover the transition with another layer of div and overwrite the original style, so that other styles will not be overwritten