让height:auto有过度效果

2017-12-22 22:14
椰子皮
5665
15
9
CSS

当分类过长时,我们希望它先显示一行,当点击某个按钮或者鼠标移上去的时候把内容显示完全;一开始指定父元素的高度为某一个固定值,例如height:24px;,我们希望展开的时候过渡到:height:auto,这时候发现完全没有过渡效果,太low了,那我们换种方式,用max-height。

css:

复制代码
.list{
  transition:max-height 0.5s;
  width:600px;
  max-height:200px;
  overflow: hidden;
}

展开后的样式:

复制代码
.list.active{
    max-height:3000px;
}

关键点在这里,指定一个很大的大于元素height:auto 时的高度的值,让元素过渡到一个达不到的height值,模拟了height:auto过渡的效果

赏
支付宝微信
9
关注公众号获取更多内容
vue使用keep-alive将页面缓存来达到记住列表位置
vue两个组件(非父子组件)之间传递数据
共有 11 条评论
发表评论
  • 天津网站建设#10030
    2019-09-21 19:09
    未知
    Win10

    好梦幻的博客主题啊

    回复
    • 椰子皮#10134
      2019-09-21 19:09
      未知
      Win10

      感谢支持

      回复
  • 武汉佛珠手串#10029
    2019-09-21 19:09
    未知
    Win7

    博客主题很漂亮啊。。。。。。。。。。

    回复
  • 聚乐之家#10028
    2019-09-21 19:09
    未知
    Win10

    日常来访,记得微笑

    回复
  • 新闻#10027
    2019-09-21 19:09
    未知
    Win7

    文章不错非常喜欢

    回复
  • 天津网站建设#10026
    2019-09-21 19:09
    未知
    Win10

    非常感谢您的分享

    回复
  • 梁巨才个人博客#10025
    2019-09-21 19:09
    未知
    Win7

    新年快乐~

    回复
  • 云南普洱茶#10024
    2019-09-21 19:09
    未知
    Win7

    挺不错,谢谢分享了

    回复
  • damon#10023
    2019-09-21 19:09
    未知
    Win7

    66666666666666.大神。

    回复
    • 椰子皮#10133
      2019-09-21 19:09
      未知
      Win7

      那是必须的...........

      回复
  • 胖起鹅#10022
    2019-09-21 19:09
    未知
    Win7

    很不错的样子,加油

    回复
    • 椰子皮#10132
      2019-09-21 19:09
      未知
      Win7

      感谢支持.........

      回复
  • 某某#10021
    2019-09-21 19:09
    未知
    Win7

    嘿嘿 做的很棒啊

    回复
    • 椰子皮#10131
      2019-09-21 19:09
      未知
      Win7

      谢谢,刚改完获取位置的接口....

      回复
共 11 条 第 1-10 条
每页
10
条
  • 1
  • 2
跳至
页 跳转
不支持canvas