elementUI设置dialog从左侧滑出

最新推荐文章于 2025-03-19 17:10:15 发布

你认识小汐吗

最新推荐文章于 2025-03-19 17:10:15 发布

阅读量1.1w

点赞数 5

分类专栏： css dialog element

本文链接：https://blog.youkuaiyun.com/sayoko06/article/details/87876123

版权

css 同时被 3 个专栏收录

6 篇文章

订阅专栏

dialog

1 篇文章

订阅专栏

element

1 篇文章

订阅专栏

本文介绍如何使用CSS3的translate3d属性创建动画效果，通过关键帧动画控制元素从屏幕一侧滑出，实现淡入淡出的过渡效果。随着elementUI更新，新增的drawer组件简化了这一过程，不再需要手动编写复杂的CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

更新：现在elementUI更新，出了drawer组件，支持从侧面划出，不用再自己写css了

控制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;
    }
  }