css任意高度收缩动画技术

弹性动画学习

学习css世界后：

利用max-height和overflow:hidden来实现

HTML

  <div class="box"><input id="check" type="checkbox"><p>个人觉得，display:table-cell最强的应用是可以任意个数列表的等宽效果。</p><div class="element"><p>display:table-cell其他一些应用，例如，两栏自适应布局，垂直居中效果等等都是可以通过其他技术手段模拟出来的，但是，根据列表个数自动等宽的效果，其他CSS是很难模拟的，尤其当需要兼容IE8浏览器的时候。</p></div><label for="check" class="check-in">更多↓</label><label for="check" class="check-out hidden">收起↑</label></div>

CSS:

    .hidden {display: none;}.box {width: 30%;max-height: 666px;margin: 0 auto;/*border:1px solid saddlebrown ;*/}#check {display: none;}.element {max-height: 0;overflow: hidden;transition: max-height .25s;}:checked~.element {/*:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）,在选中后的样式*/max-height: 666px;/* border: 1px solid saddlebrown;*/}

    var checkIn = document.querySelector(".check-in");var checkOut = document.querySelector(".check-out");checkIn.onclick = function () {checkIn.classList.add("hidden");checkOut.classList.remove("hidden");}checkOut.onclick = function () {checkOut.classList.add("hidden");checkIn.classList.remove("hidden");}

注意：需要注意的是max-height不可以过小;如果.element的大于max-height那就无法完全显示出来,如果过大就会出现延迟的效果

总结：

1.<label for="check" class="check-in">更多↓</label>中的for属性与<input id>中的ID的关系

2.对伪元素的学习 :checked在单选或复选checkbox的时候触发的类，

css任意高度收缩动画技术相关推荐

深挖基于 CSS 的变换与动画技术
深挖基于 CSS 的变换与动画技术李俊才的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm= ...
css展开与收缩动画
改变高度,利用transition过渡效果. .box {width: 300px;height: 20px;transition: height 0.3s;overflow: hidden;back ...
vue3 中使用动画技术
vue3 中使用动画技术作者: jcLee95 邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.net/qq_28550263?spm=1001.21 ...
CSS 奇技淫巧：动态高度过渡动画
这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: {height: unset;transition: all 0.3s linear;wi ...
人脸造型与表演动画技术
人脸动画最显著的应用是影视制作.在<终结者Ⅱ>.<玩具总动员>.<真实的谎言>.<夺面双雄>等电影的制作中都无不体现了人脸造型和动画技术的魅力.动画师总 ...
css ltimg gt只适应,css3动画,CSS3实战小技巧--使用CSS变量实现波浪动画
css3动画,CSS3实用技巧--利用CSS变量实现波浪动画.今日头条新闻(www.leadip.com)为您带来相关内容的详细介绍. CSS3实用技巧--用CSS变量实现波浪动画 2017年3月,微 ...
如何设计出完美的动画技术架构
动画在前端领域中的作用是提升用户体验.吸引用户注意力.在互联网行业中,它也是一个永久的热点话题.一般在电商平台或者娱乐类项目(快手.拼多多.淘宝.腾讯视频.抖音等)中会出现很多的动画场景. 那么通过本 ...
vue收缩面板_vuejs实现折叠面板展开收缩动画
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画. 循环列表,html: {{item.content}} [展开] [收缩] 在css上加上动画transit ...
jq过渡收缩动画用js实现
jq过渡收缩动画用js实现想法:用js实现sildToggle效果使div收缩总结:jq能够实现的js也可需要对某些特定的值进行判断难点:如何把jq的slideToggle用js的写法效果 ...

css任意高度收缩动画技术

css任意高度收缩动画技术相关推荐

最新文章

热门文章