el-dialog从底部弹出的动画效果

Question

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

想要加上从底部弹出的效果 但是css加上感觉没效果 有人加过吗?是怎么加的呢？

Answer 1

参考答案：

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

在你需要的地方复写这两个动画就行了。
附上完整的代码:

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

效果图：

实现思路说明：

参考源码：https://github.com/ElemeFE/el...，由于dialog已经使用了动画效果，你只需要在这个基础上去覆盖源码的动画即可。这是我想出来的办法，若其他人有其他办法欢迎交流。

Answer 2

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

可以在transition 外面再套一层div 然后覆盖掉原来的样式,这样就不会覆盖掉其他样式了

Answer 3

dialog中指定 custom-class = “dialog-customer-class”
然后style如下处理，就不会全局替换了

<el-dialog title="title" :close-on-click-modal="true" :visible.sync="visible" width="40%" :modal="false" top="0"
    :modal-append-to-body="false" custom-class="dialog-customer-class">
    <div>
      弹窗内容
    </div>
  </el-dialog>

<style> 


 .dialog-fade-enter-active .dialog-customer-class   {
   animation: my-dialog-fade-in 0.3s ease !important;
 }

.dialog-fade-leave-active .dialog-customer-class   {
   animation: my-dialog-fade-out 0.3s ease !important; 
 }

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

</style>