elementUI设置dialog从左侧滑出

使用CSS3的 translate3d 演示来实现动画效果 w3school链接

控制100%和0的位置,可以控制从不同方向滑出 translate3d(x,y,z)

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

猜你喜欢

转载自blog.csdn.net/sayoko06/article/details/87876123