在 Height 属性上使用 CSS 过渡

2025-06-07

在 Height 属性上使用 CSS 过渡

网页上的一些小效果可能会对网站的用户体验产生很大的影响。当元素的状态发生变化时，如果能通过视觉效果来表明操作的发生，那就太棒了。得益于 CSS 过渡，我们可以在 HTML 元素上使用各种各样的过渡效果。

元素的高度是 CSS 属性中经常需要过渡的一个。有时，我们希望元素的某个部分在需要时才折叠。例如，当点击按钮时，元素的高度会增加或减少。查看更多按钮和 Bootstrap 面板使用这种技术。一些框架（例如 Bootstrap 和 JQuery）自带过渡效果。然而，CSS 过渡在高度过渡方面为您提供了极大的灵活性。而且，您不必因此在项目中引入另一个框架。因此，在本文中，我们将了解如何为高度属性添加动画效果以及可能遇到的限制。

过渡高度

我们将用一个简单的例子来解释这一点。我们有一篇需要折叠的文章。点击“查看更多”按钮会增加元素的高度，以显示文章的所有内容。我们将为此创建一个 CSS 类。点击“查看更多”按钮时，JavaScript 会将这个类添加到文章元素中。

因此首先，我们将向 HTML 文件添加一个文章元素。

<body>
    <article id="article">
        <h3>Why You Should Care about the Ipsum</h3>
        <p>Tart jelly beans croissant toffee oat cake soufflé gingerbread. Toffee powder cheesecake soufflé bonbon tiramisu toffee powder gummi bears. Toffee tootsie roll powder soufflé apple pie. Fruitcake fruitcake soufflé sweet oat cake cotton candy lemon drops biscuit. Chupa chups fruitcake dessert icing halvah oat cake. Lollipop candy canes halvah bonbon marshmallow croissant. Wafer chupa chups cotton candy tart pudding pie cupcake. Candy canes gummies macaroon pudding cupcake cupcake pudding jujubes. Donut halvah pie chocolate. Sugar plum dessert pudding icing jelly-o cake. Gingerbread macaroon wafer. Caramels muffin jelly wafer carrot cake.</p>

        <p>Marshmallow candy cookie danish cake. Cupcake croissant gummi bears pastry wafer. Macaroon croissant bonbon wafer. Topping fruitcake topping biscuit. Tiramisu powder sesame snaps candy. Dessert donut cookie carrot cake dragée muffin. Lollipop oat cake cookie candy canes fruitcake. Candy croissant candy canes croissant bear claw cake brownie biscuit pie. Liquorice wafer wafer cookie lollipop gingerbread chocolate cake oat cake dessert. Pudding gingerbread croissant cheesecake soufflé. Muffin gummies chocolate chocolate cupcake pastry. Sweet roll fruitcake bear claw sweet caramels lemon drops lemon drops.</p>

        <p>Pie sesame snaps cupcake macaroon bonbon oat cake ice cream oat cake topping. Brownie dessert toffee brownie jelly-o chocolate jujubes halvah chocolate bar. Pudding gingerbread dessert. Bear claw tiramisu gummies pudding. Toffee marshmallow jelly beans pie marzipan caramels ice cream lollipop powder. Dragée sesame snaps sugar plum. Marshmallow sweet roll croissant tootsie roll icing. Dragée chocolate marzipan jelly cotton candy. Jujubes sweet chocolate bar candy sweet roll lollipop biscuit dessert. Danish lollipop caramels toffee pastry. Wafer candy canes cupcake chupa chups gummies lemon drops jujubes powder. Caramels danish marshmallow gummies. Jujubes muffin danish pie icing brownie.</p>

        <p>Toffee sweet tiramisu topping. Cookie fruitcake icing jelly-o sesame snaps. Caramels gingerbread ice cream pastry donut. Gummies liquorice carrot cake sesame snaps muffin toffee dragée marzipan oat cake. Chocolate bar lemon drops dessert. Sweet cupcake sesame snaps carrot cake dessert candy canes halvah tart ice cream. Jelly donut chocolate bar chupa chups tootsie roll soufflé carrot cake tootsie roll gummi bears. Pastry jujubes soufflé marshmallow toffee. Macaroon marshmallow oat cake jujubes caramels topping marzipan cupcake icing. Brownie jelly sweet tootsie roll brownie jujubes cupcake pie. Cookie lollipop ice cream tiramisu jelly-o chocolate gummies. Tart biscuit tiramisu biscuit cake tart danish topping cookie. Liquorice donut dragée tart. Dragée soufflé pudding halvah cookie marshmallow jujubes sweet roll.</p>

        <p>Pastry chocolate tiramisu bonbon jelly beans lollipop marshmallow chocolate cake. Icing carrot cake gummies cheesecake dragée. Cake fruitcake gummies. Halvah jujubes toffee pudding bonbon soufflé brownie cupcake candy. Icing biscuit cake jujubes. Chocolate bar candy canes caramels cupcake. </p>
    </article>
    <button id="seeMoreBtn">See More</button>
</body>
Enter fullscreen mode Exit fullscreen mode

这是我们的 CSS

    article {
        max-width: 800px;
        height: 300px;
        overflow-y: hidden;
    }

    /* This class is added when button is clicked */
    article.expanded {
        height: 628px;
    }

    button {
        height: 41px;
        padding: 0 2rem;
    }
Enter fullscreen mode Exit fullscreen mode

然后使用一些 JavaScript 来启动该过程

    const seeMore = document.getElementById("seeMoreBtn");
    const article = document.getElementById("article");

    seeMore.addEventListener("click", () => {
        article.classList.toggle("expanded");

        const expanded = article.classList.contains("expanded");
        if (expanded) {
            seeMore.innerHTML = "See Less";
        } else {
            seeMore.innerHTML = "See More";
        }
    });
Enter fullscreen mode Exit fullscreen mode

让我们在 CSS 中添加一些过渡效果，以便在单击按钮时内容能够上下滑动。

我们将为 article 元素添加 transition 属性，这样 CSS 就变成了

    article {
        max-width: 800px;
        height: 300px;
        overflow-y: hidden;
        transition: height 0.4s linear;
    }
Enter fullscreen mode Exit fullscreen mode

现在文章可以上下滑动。

带动画的高度

你可能会以为这就是我要感谢你阅读这篇文章的地方。不，不是的。这种方法存在一个局限性。我们来分析一下。

局限性

当文章高度已知时，我们上面的方法效果很好。但是，当元素高度未知时会发生什么呢？例如，处理动态内容时？高度也可能随着屏幕尺寸的增大或减小而变化，这就带来了挑战。

对于动态内容，元素的高度应设置为auto。这样，元素高度的任何增加或减少都会被适应。但问题在于：当元素的高度设置为 auto 时，CSS 过渡将不起作用。以下是您将得到的结果。

无动画的高度

好消息是，有一种方法可以解决这个问题，而不必借助更多的 JavaScript。

解决方案

这个技巧是用max-height属性 来过渡，而不是height属性 。首先，我们必须估算元素所能达到的最大高度。然后，我们将max-height元素扩展时的高度设置为大于估算值。所以，让我们再次回顾一下 CSS。这次，我们将height属性更改为max-height。

    article {
        max-width: 800px;
        max-height: 300px;
        overflow-y: hidden;

        /*Transition time is increased to accomodate the height */
        transition: max-height 0.7s linear;
    }

    article.expanded {
        max-height: 1500px;
    }
Enter fullscreen mode Exit fullscreen mode

这样动画就能正常工作，我们仍然可以获得想要的效果。过渡时间可能需要根据所需的效果进行调整。

带动画的高度

有任何问题或补充？请留言。

感谢您的阅读:)

文章来源：https://dev.to/sarah_chima/using-css-transitions-on-the-height-property-al0
Devto 翻译
PREV
您最喜欢的学习资源是什么？
NEXT
CSS Calc 函数