css上下滚动滚动_纯CSS上下滑动

最新推荐文章于 2024-07-30 11:44:55 发布

culuo8053

最新推荐文章于 2024-07-30 11:44:55 发布

阅读量2.5k

点赞数

文章标签： css html css3 javascript vue ViewUI

原文链接：https://davidwalsh.name/css-slide

版权

本文介绍如何使用纯CSS实现上下滑动效果，避免使用JavaScript进行元素动画，提高效率和优雅性。通过CSS的overflow-y和动画属性，结合transform的 translateY 属性，实现了内容隐藏和滑动显示。虽然对于高度不确定的元素存在不完美之处，但可以考虑使用CSS框架或JavaScript动态计算高度以完善动画效果。

摘要由CSDN通过智能技术生成

css上下滚动滚动

If I can avoid using JavaScript for element animations, I'm incredibly happy and driven to do so. They're more efficient, don't require a JavaScript framework to manage steps, and they're more elegant. One effect that is difficult to nail down with pure CSS is sliding up and down, where the content is hidden when "up" and slides in when "down". The reason it's difficult is because you may not know the content height. After playing around with different CSS properties, I've found a way to make a pure CSS sliding effect.

如果我可以避免将JavaScript用于元素动画，那么我会非常高兴并为此而努力。它们效率更高，不需要JavaScript框架来管理步骤，并且更加优雅。使用纯CSS难以确定的一种效果是上下滑动，其中内容在“向上”时隐藏，而在“向下”时滑动。之所以困难，是因为您可能不知道内容的高度。在研究了不同CSS属性之后，我找到了一种制作纯CSS滑动效果的方法。

View Demo