修改el-dialog动画导致在有threejs的页面闪动的问题

修改el-dialog动画代码如下：

/* dialog框显示和隐藏的动画效果 改浮现方式从左往右出现 */
@keyframes dialog-fade-in {
  0% {
    transform: translate3d(-100%, 0, 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(100%, 0, 0);
    opacity: 0;
  }
}

现象：

平时用着好好的，突然有一天，在3D场景中使用弹出框，出问题了，闪屏啊。
就是那种从左往右滑到中间突然闪现一下重新滑动。
这……

定位：

1、查看点击事件只触发了一次
2、并没有触发关闭事件
3、:visible.sync="dialogVisible"监控dialogVisible也就只变化了一次变成了true
费解……
4、那我关了动画吧，注释掉以上，诶，好了。
5、然后我就疯狂找规律啥时候会出现闪屏呢，好像是threejs加载了很多动画以后就会出现，如果仅仅加载场景没有各种特效，弹出框是没有闪屏的。
这好像也说得通，因为threejs在不停渲染页面，而弹出框动画也有执行时间也在渲染界面，所以冲突了？
于是乎我修改弹出框的动画时间：
.el-dialog__wrapper {
transition-duration: 3s;
}
果然出现了奇奇怪怪的现象，虽然也不能证明啥。

思考：

element-ui并未对外提供这个动画控制，所以……我不知道了，反正就是冲突了。
注释掉上述代码就行了，和threejs连用的el-dialog还是用默认的动画吧。
哎，记录一下，求大神解答……