element的弹窗

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