让height:auto有过度效果

2017-12-22 22:14
椰子皮
5360
11
9
vue

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

 

css:</p>

 

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

 

展开后的样式:</p>

 

.list.active{
    max-height:3000px;
}

 

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

支付宝微信
9
关注公众号获取更多内容
vue两个组件(非父子组件)之间传递数据
结合lazyload实现文章页里面的图片预加载
共有 11 条评论
发表评论
  • 头条#10020
    2019-09-21 19:09
    未知
    Win7

    文章不错非常喜欢

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

    嘿嘿 做的很棒啊

    椰子皮2022-03-27 回复@某某
    谢谢,刚改完获取位置的接口....
  • 胖起鹅#10022
    2019-09-21 19:09
    未知
    Win7

    很不错的样子,加油

    椰子皮2022-03-27 回复@胖起鹅
    感谢支持.........
  • damon#10023
    2019-09-21 19:09
    未知
    Win7

    66666666666666.大神。

    椰子皮2022-03-27 回复@damon
    那是必须的...........
  • 云南普洱茶#10024
    2019-09-21 19:09
    未知
    Win7

    挺不错,谢谢分享了

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

    新年快乐~

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

    非常感谢您的分享

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

    文章不错非常喜欢

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

    日常来访,记得微笑

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

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

总共 11
  • 1
  • 2
不支持canvas
春季
夏季
秋季
冬季
暗黑
简约
小清新