问

不使用position:absolute创建css过渡

炽热冰菊66 发布于 2023-02-13 18:24

我意识到css动画是一个很好的主题,但我只是想知道创建简单幻灯片转换的最佳方法？大多数情况下,当你读到像这样的幻灯片转换时,某种位置:绝对是假定的.这不是内容通常以HTML格式组织的方式,也不应该如此.

所以,如果我想创建一个div滑动到左边并且一个div从右边滑动的过渡,那么在不假设任何这些div具有绝对定位或任何其他特定过渡特定内容的情况下,这将是一个好策略.从...开始？

 
     
         Some content
         Some more
     
     
         Some more content

我提出这个似乎有效的解决方案,即使我不确定它是否优雅:

http://jsfiddle.net/CAg4f/4/

1 个回答

动画时移动元素的最佳方法是使用CSS变换进行翻译。
例如，将鼠标悬停在容器上时要进行过渡：
```
.this-should-slide-left,
.this-should-from-left {
    transition: transform .25s
}

.container .this-should-from-left {
    transform: translateX(100px);
}

.container:hover  .this-should-from-left {
    transform: translateX(0);
}

.container:hover .this-should-slide-left {
    transform: translateX(-100px);
}
```
由于利用了硬件加速功能，并且不涉及定位，因此平移使过渡更加平滑，因此您可以将布局的设计与动画本身的设计完全分开。

在这里阅读更多
2023-02-13 18:27 回答

Tibetan-妍自_557

撰写答案

今天，你开发时遇到什么问题呢？

热门标签

PHP1.CN | 中国最专业的PHP中文社区 | PNG素材下载 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved

京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区版权所有