前端设置dialog弹出框框关闭动画效果

项目前端使用element-ui框架，其提供的dialog弹出框没有过渡动画，比较单调，项目需要实现关闭弹出框时，弹出框逐渐缩小并移动到右上角消失。

只能自己手动修改css样式，这里用到了animation 和 transform属性；

贴代码：

其中.popout-box的class属性是通过befroe-close绑定上去的。模态框打开的时候没有，关闭前设置class，然后通过class绑定动画效果。

  .popout-box {
    // 将dialog的class绑定close_com动画，0.7s表示动画时间为0.7秒
    animation: close_com 0.7s linear 1;
    -webkit-animation: close_com 0.7s linear 1;
  }

  @-webkit-keyframes close_com {
    100% {
      -webkit-transform:  translate(40%,-42%) scale(0);
    }
  }

  @keyframes close_com {
    100% {
      transform:  translate(40%,-42%) scale(0);
    }
  }

animation 属性

将动画与元素绑定起来，name时自己随意起的名字

transform 属性

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

translate()设置X,Y轴移动；

scale(0)设置逐渐变小直至消失；