logo

  • 欢迎各位友链
  • 本站支持自适应
  • 技术合作请留言

  • 首页
  • 文章 
    • vue
    • app
    • node
    • 生活
    • 小程序
    • javascript
    • uniapp
  • 案例 
    • app
    • 小程序
    • pc
  • 相册
  • 友链
  • 留言
  • 微语
  • 关于

让height:auto有过度效果

 2017-12-22
 椰子皮
 11
 1840

当分类过长时,我们希望它先显示一行,当点击某个按钮或者鼠标移上去的时候把内容显示完全;一开始指定父元素的高度为某一个固定值,例如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>


支付宝 微信
 4

 vue使用keep-alive将页面缓存来达到记住列表位置
 vue两个组件(非父子组件)之间传递数据
  • 结合lazyload实现文章页里面的图片预加载
  • vue中路由切换后点击事件还存在
  • jquery判断滚动到底部
  • 移动端搜索按钮提交form表单不刷新页面
共有 11 条评论
 发表评论
  • 10020#
    头条
    头条
    •  2019-09-21
    •  未知位置
    •  Win7
    文章不错非常喜欢
  • 10021#
    某某
    某某
    •  2019-09-21
    •  未知位置
    •  Win7
    嘿嘿 做的很棒啊
  • 10022#
    胖起鹅
    胖起鹅
    •  2019-09-21
    •  广东省广州市
    •  Win7
    很不错的样子,加油
  • 10023#
    damon
    damon
    •  2019-09-21
    •  广东省广州市天河区
    •  Win7
    66666666666666.大神。
  • 10024#
    云南普洱茶
    云南普洱茶
    •  2019-09-21
    •  云南省昆明市五华区
    •  Win7
    挺不错,谢谢分享了
  • 10025#
    梁巨才个人博客
    梁巨才个人博客
    •  2019-09-21
    •  北京市北京市海淀区
    •  Win7
    新年快乐~[tieba_0][sina_8]
  • 10026#
    天津网站建设
    天津网站建设
    •  2019-09-21
    •  天津市天津市和平区
    •  Win10
    非常感谢您的分享
  • 10027#
    新闻
    新闻
    •  2019-09-21
    •  广西壮族自治区贺州市八步区
    •  Win7
    文章不错非常喜欢
  • 10028#
    聚乐之家
    聚乐之家
    •  2019-09-21
    •  四川省乐山市市中区
    •  Win10
    日常来访,记得微笑
  • 10029#
    武汉佛珠手串
    武汉佛珠手串
    •  2019-09-21
    •  湖北省武汉市洪山区
    •  Win7
    博客主题很漂亮啊。。。。。。。。。。
  • 1
  • 2



表情
 不支持canvas
椰子皮
椰子皮
觉得不错就点个赞吧
 181
 关注 公众号
1288 运行天数
210 今日pv
52 文章数量
 最近更新
 2021-04-08 22:25 更新了 文章
 js查找出现次数最多的字符并统计次数

 最新微语
  • 把清新风格改为毛玻璃效果,虽然有点卡,但 2020-05-31
  • 本站春季主题已完成,大家觉得怎样。 2020-03-15
  • 很久没更新了,不知道说啥,提前祝大家新年 2018-06-05
 最新评论
  • 歌尽花颜
    歌尽花颜 Win10 2021-02-24
    文章 @touchmove.stop.prevent怎么加在根元素上呀?.prevent不是只支持H5的吗?
  • kiinlam
    kiinlam Win10 2021-02-04
    文章 https://ask.dcloud.net.cn/article/36549
  • 小何
    小何 Win10 2021-01-04
    文章 这样取消弹窗了就不是app的正常运行过程了;APP权限拒绝之后怎么让它可以正常进入应用,而不是拒绝了权限就退出应用了
 最多点赞
 最多评论
  • 全新椰子皮博客版本介绍及说明。
    全新椰子皮博客版本介绍及说明。...
    2017-11-23 赞:20
  • vuex action 与mutations 的区别
    vuex action 与mutations 的区别...
    2018-06-24 赞:17
  • vue+typescript使用tinymce富文本编辑器
    vue+typescript使用tinymce富文本编辑...
    2020-06-09 赞:11
  • 让height:auto有过度效果
    让height:auto有过度效果...
    2017-12-22 赞:
  • css3使用transform: scale 元素出现偏移
    css3使用transform: scale 元素出现偏...
    2018-03-10 赞:
  • 结合lazyload实现文章页里面的图片预加载
    结合lazyload实现文章页里面的图片预加载...
    2017-10-05 赞:
 标签
uniapp javascript typescript 小程序 app vue nuxt node
 友情链接
申请
mashihuan Khari & Yaru 美好记忆 帅气的木木 大蒜博客 Aquan 快乐编程 fivewoods Paul 贺德强 太傅博客 梁巨才博客 jielin littlewin IT技术宅
首页 申请友链 关于本站 广告合作
CopyRight © 2016-2020 - 椰子皮 - 浙ICP备16003960号