The animation effect of el-dialog popping up from the bottom

<transition name="fade">
        <el-dialog
          :visible.sync="isShown"
          :append-to-body=true
          width="100%"
          >
            <div>
              111111
            </div>
        </el-dialog></transition>

want to add the pop-up effect from the bottom, but css plus feeling has no effect. Has anyone added it? How do you add it?

Vue.js element-ui
Mar.01,2021

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:

http://yexk.cn/temp/a.gif

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

Previous: The calculator achieves 0.1-0.2-0.3.

Next: Regular matching Chinese problem

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu