美文网首页
css3实现从固定尺寸到auto的过渡动画?

css3实现从固定尺寸到auto的过渡动画?

作者: 菲龍探雲 | 来源:发表于2017-02-09 15:34 被阅读102次

    用 height 是不行的。

    不过,用 max-height 和 min-height 可以实现同等效果。

    .box{
    max-height: 120px;
    min-height: 120px;
    overflow: hidden;
    transition: max-height ease-out 0.2s;
    }
    .box:hover{
    max-height: 500px;
    transition: max-height ease-in 0.2s;
    }

    如上所示,只要下段的 max-height 是一个实际内容不会达到的高度,那就相当于是 auto 了。

    作者:素天
    链接:https://www.zhihu.com/question/35991373/answer/130266973
    来源:知乎

    相关文章

      网友评论

          本文标题:css3实现从固定尺寸到auto的过渡动画?

          本文链接:https://www.haomeiwen.com/subject/cttwittx.html