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?

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

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1c22af4-54ca5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1c22af4-54ca5.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?