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

本文主要是介绍前端设置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)设置逐渐变小直至消失；

这篇关于前端设置dialog弹出框框关闭动画效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---