el-dialog從底部彈出的動(dòng)畫效果

參考答案：

@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;
  }
}

在你需要的地方復(fù)寫這兩個(gè)動(dòng)畫就行了。
附上完整的代碼:

<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>

效果圖：

實(shí)現(xiàn)思路說明：

參考源碼：https://github.com/ElemeFE/el...，由于dialog已經(jīng)使用了動(dòng)畫效果，你只需要在這個(gè)基礎(chǔ)上去覆蓋源碼的動(dòng)畫即可。這是我想出來的辦法，若其他人有其他辦法歡迎交流。