关于webkit-transition CSS过渡不适用于百分比高度

今天在优化7B2文章目录模块时候想隐藏掉用户展示小模块,先给模块新增了transform属性,当滚动时候高度设置为0。整完发现动画没起作用,网上搜了搜才发现,原来transform不支持百分比属性。如何解决且看下文

transform属性是什么

CSS3中新增的transform属性,可以实现元素在变换过程中的过渡效果,实现了基本的css动画。
transition动画
功能:实现元素不同状态之间的平滑过渡。
此前:元素->hover状态 直接切换,从开始状态到结束状态,瞬间完成,中间过程几乎无法查看。
格式:
transition:过渡的属性 完成时间(s) 运动曲线 延迟时间

数值型的属性才可以设置过渡。
width,height,color,font-size

transition-property 过渡属性:发生变化时,想要有过渡效果的属性设置全属性all。
transition-duration 完成时间:单位是s/ms。
transition-timing-function 运动曲线:

linear: 表示匀速过渡;
ease: 默认值,表示过渡的速度先慢,再快,最后非常慢;
ease-in: 表示过渡的速度先慢,后越来越快,直至结束;
ease-out: 表示过渡的速度先快,后越来越慢,直至结束;
ease-in-out: 表示过渡的速度在开始和结束时都很慢;
cubic-bezier(n,n,n,n): 自定义贝塞尔曲线的效果,其中的四个参数为从0到1的数字。transition-delay 延迟时间:单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时,也会生效。

示例代码:

.detailsCollapsed
{
   display:none;
   height:0%;
   width:100%;
   -webkit-transition:height 40s ease-in-out;
}

.detailsExpanded
{
    display:block;
    visibility:visible;
    height:100%;
    width:100%;
    -webkit-transition:height 40s ease-in-out;
}

transition height的属性

CSS 支持动画的属性中的 height 属性如下:
height :yes, as a length, percentage or calc()
即:当 height 的值是 length,百分比或 calc() 时支持 CSS3 过渡。
所以当元素 height : auto 时,是不支持 CSS3 动画的。
由此可见高度可以设置为百分比,但是前提是要有对比值,如果没有设置高度值,且点击或者新增class后突然设置高度为0,并不会产生动画。也或者一个百分比值,一个0.也是不行的。

解决方案

在常见的开发中很多时候并不会设置模块DIV高度,但是我们可以用max-height来作为初始值。经过用户交互,点击事件新增class或者添加伪类属性后,改变这个高度。当然如果你JS扎实也可以用JS解决。

示例代码:

    div{
  max-height: 0;
  transition: max-height .5s;
}
div:hover{
  max-height: 200px;
}
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。本站所有内容均由李哒胖子原创,码字不易,欢迎打赏。如需在使用过程中有遇到任何问题,可以随时联系本人+V18003862798!!!

给TA打赏
共{{data.count}}人
人已打赏
wordpress教程前端笔记

wordrepss让pre支持php代码并换行

2022-11-2 20:09:12

瀑布流

瀑布流没有图片样式展示

2022-11-21 20:55:55

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧