CSS 过渡自动高度不起作用 [英] CSS transition auto height not working

查看：29
本文介绍了CSS 过渡自动高度不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个网站，我决定用纯 CSS 片段替换基于 jquery 的切换框.当我使用固定高度值进行过渡(CSS 的最后几行)时，效果很好，但是使用 auto 值时，动画丢失，只有高度变化有效果！

有没有办法将它与自动值一起使用?我想使用可变文本而不是脚本.

.ac-container{宽度:400px；边距:10px 自动 30px 自动；文本对齐:左；}.ac-容器标签{font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;填充:5px 20px；位置:相对；z-索引:20；显示:块；高度:30px；光标:指针；颜色:#777；文本阴影:1px 1px 1px rgba(255,255,255,0.8);行高:33px；字体大小:19px；背景:#ffffff；背景:-moz-线性梯度(顶部，#ffffff 1%，#eaeaea 100%)；背景:-webkit-gradient(线性，左上，左下，色标(1%，#ffffff)，色标(100%，#eaeaea))；背景:-webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);背景:-o-线性梯度(顶部，#ffffff 1%，#eaeaea 100%)；背景:-ms-线性梯度(顶部，#ffffff 1%，#eaeaea 100%)；背景:线性梯度(顶部，#ffffff 1%，#eaeaea 100%)；过滤器:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );框阴影:0px 0px 0px 1px rgba(155,155,155,0.3),1px 0px 0px 0px rgba(255,255,255,0.9) 插入，0px 2px 2px rgba(0,0,0,0.1);}.ac 容器标签:悬停{背景:#fff;}.ac-container input:checked + label,.ac 容器输入:选中 + 标签:悬停{背景:#c6e1ec；颜色:#3d7489；文本阴影:0px 1px 1px rgba(255,255,255, 0.6);框阴影:0px 0px 0px 1px rgba(155,155,155,0.3),0px 2px 2px rgba(0,0,0,0.1);}.ac-容器输入{显示:无；}.ac-容器部分{背景:rgba(255, 255, 255, 0.5);边距顶部:-1px；溢出:隐藏；高度:0px；位置:相对；z-索引:10；-webkit-transition:高度 0.3 秒缓入出，框阴影 0.6 秒线性；-moz-transition:高度 0.3s 缓入出，框阴影 0.6s 线性；-o-transition:高度 0.3s 缓入淡出，box-shadow 0.6s 线性；-ms-transition:高度 0.3s 缓入淡出，box-shadow 0.6s 线性；过渡:高度 0.3 秒缓出，框阴影 0.6 秒线性；}.ac-容器部分 p{字体样式:斜体；颜色:#777；行高:23px；字体大小:14px；填充:20px；文本阴影:1px 1px 1px rgba(255,255,255,0.8);}.ac 容器输入:检查 ~ 部分{-webkit-transition:高度 0.5s 缓入出，框阴影 0.1s 线性；-moz-transition:高度 0.5s 缓入淡出，box-shadow 0.1s 线性；-o-transition:高度 0.5s 缓入淡出，box-shadow 0.1s 线性；-ms-transition:高度 0.5s 缓入淡出，box-shadow 0.1s 线性；过渡:高度 0.5 秒缓出，框阴影 0.1 秒线性；box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);}.ac-container input:checked ~ section.ac-small{高度:120px；/*汽车*/}

<div><input id="ac-1" name="accordion-1" type="checkbox"/><section class="ac-small"><p>一些内容... </p></节><label for="ac-1">关于我们</label>
<div><input id="ac-2" name="accordion-2" type="checkbox"/><section class="ac-small"><p>一些内容... </p></节><label for="ac-2">关于我们</label>

解决方案

如果您只想使用 CSS，一个解决方案是转换 max-height 而不是 height 和将其设置为比以往任何时候都更大的值...

这是一个演示

您需要稍微调整转换速度，但至少该示例让您了解如何完成.不要忘记在转换中更改属性.从 transition: height 0.5s; 到 transition: max-height 0.5s;.

希望这有帮助！

.ac-container{宽度:400px；边距:10px 自动 30px 自动；文本对齐:左；}.ac-容器标签{font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;填充:5px 20px；位置:相对；z-索引:20；显示:块；高度:30px；光标:指针；颜色:#777；文本阴影:1px 1px 1px rgba(255,255,255,0.8);行高:33px；字体大小:19px；背景:#ffffff；背景:-moz-线性梯度(顶部，#ffffff 1%，#eaeaea 100%)；背景:-webkit-gradient(线性，左上，左下，色标(1%，#ffffff)，色标(100%，#eaeaea))；背景:-webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);背景:-o-线性梯度(顶部，#ffffff 1%，#eaeaea 100%)；背景:-ms-线性梯度(顶部，#ffffff 1%，#eaeaea 100%)；背景:线性梯度(顶部，#ffffff 1%，#eaeaea 100%)；过滤器:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );框阴影:0px 0px 0px 1px rgba(155,155,155,0.3),1px 0px 0px 0px rgba(255,255,255,0.9) 插入，0px 2px 2px rgba(0,0,0,0.1);}.ac 容器标签:悬停{背景:#fff;}.ac-container input:checked + label,.ac 容器输入:选中 + 标签:悬停{背景:#c6e1ec；颜色:#3d7489；文本阴影:0px 1px 1px rgba(255,255,255, 0.6);框阴影:0px 0px 0px 1px rgba(155,155,155,0.3),0px 2px 2px rgba(0,0,0,0.1);}.ac-容器输入{显示:无；}.ac-容器部分{背景:rgba(255, 255, 255, 0.5);边距顶部:-1px；溢出:隐藏；最大高度:0px；位置:相对；z-索引:10；-webkit-transition:最大高度 0.3 秒缓入缓出，框阴影 0.6 秒线性；-moz-transition: max-height 0.3s 缓入-out, box-shadow 0.6s 线性；-o-transition:最大高度 0.3 秒缓入缓出，框阴影 0.6 秒线性；-ms-transition:最大高度 0.3 秒缓入缓出，框阴影 0.6 秒线性；过渡:最大高度 0.3 秒缓出，框阴影 0.6 秒线性；}.ac-容器部分 p{字体样式:斜体；颜色:#777；行高:23px；字体大小:14px；填充:20px；文本阴影:1px 1px 1px rgba(255,255,255,0.8);}.ac 容器输入:检查 ~ 部分{-webkit-transition: max-height 0.5s 缓入缓出，box-shadow 0.1s 线性；-moz-transition: max-height 0.5s 缓入-out, box-shadow 0.1s 线性；-o-transition: max-height 0.5s 缓入缓出，box-shadow 0.1s 线性；-ms-transition: max-height 0.5s 缓入缓出，box-shadow 0.1s 线性；过渡:最大高度 0.5 秒缓出，框阴影 0.1 秒线性；box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);}.ac-container input:checked ~ section.ac-small{最大高度:500px；/*汽车*/}

<div><input id="ac-1" name="accordion-1" type="checkbox"/><section class="ac-small"><p>一些内容...一些内容...一些内容...一些内容...一些内容...一些内容...一些内容...一些内容...一些内容...一些内容... 部分内容... 部分内容... 部分内容... 部分内容... 部分内容... 部分内容... 部分内容... 部分内容... 部分内容... 部分内容内容...一些内容...一些内容...</p></节><label for="ac-1">关于我们</label>
<div><input id="ac-2" name="accordion-2" type="checkbox"/><section class="ac-small"><p>一些内容... </p></节><label for="ac-2">关于我们</label>

I have a website, and I decided to replace the jquery based toggle boxes with pure CSS snippets. When I use fixed height value for the transition (last lines of the CSS), it works well, but with the auto value, the animation is missing, only the height change has an effect!

Is there a way to use this with auto value? I would like to use variable texts and no scripts.

.ac-container{
  width: 400px;
  margin: 10px auto 30px auto;
  text-align: left;
}
.ac-container label{
  font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
  padding: 5px 20px;
  position: relative;
  z-index: 20;
  display: block;
  height: 30px;
  cursor: pointer;
  color: #777;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
  line-height: 33px;
  font-size: 19px;
  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
  background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
  box-shadow: 
    0px 0px 0px 1px rgba(155,155,155,0.3), 
    1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
    0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
  background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
  background: #c6e1ec;
  color: #3d7489;
  text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
  box-shadow: 
    0px 0px 0px 1px rgba(155,155,155,0.3), 
    0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container input{
  display: none;
}
.ac-container section{
  background: rgba(255, 255, 255, 0.5);
  margin-top: -1px;
  overflow: hidden;
  height: 0px;
  position: relative;
  z-index: 10;
  -webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  -ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
  transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container section p{
  font-style: italic;
  color: #777;
  line-height: 23px;
  font-size: 14px;
  padding: 20px;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ section{
  -webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  -moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  -o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  -ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
  box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ section.ac-small{
  height: 120px; /*auto*/
}

<div class="ac-container">
  <div>

    <input id="ac-1" name="accordion-1" type="checkbox" />
    <section class="ac-small">
      <p>Some content... </p>
    </section>
    <label for="ac-1">About us</label>

  </div>	

  <div>	
    <input id="ac-2" name="accordion-2" type="checkbox" />
    <section class="ac-small">
      <p>Some content... </p>
    </section>
    <label for="ac-2">About us</label>
  </div>
</div>

解决方案

One solution if you just want to use CSS is to transition max-height instead of height and set it to something greater than it will ever get ...

Here's a DEMO

You will need to tweek the speed of the transition a bit, but at least the example gives you an idea on how it can be done. Don't forget to change the property in your transition as well. From transition: height 0.5s; to transition: max-height 0.5s;.

Hope this helps! 

.ac-container{
    width: 400px;
    margin: 10px auto 30px auto;
    text-align: left;
}
.ac-container label{
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    padding: 5px 20px;
    position: relative;
    z-index: 20;
    display: block;
    height: 30px;
    cursor: pointer;
    color: #777;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: 33px;
    font-size: 19px;
    background: #ffffff;
    background: -moz-linear-gradient(top, #ffffff 1%, #eaeaea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#ffffff), color-stop(100%,#eaeaea));
    background: -webkit-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -o-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: -ms-linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=0 );
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
    background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        0px 2px 2px rgba(0,0,0,0.1);
}

.ac-container input{
    display: none;
}
.ac-container section{
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    max-height: 0px;
    position: relative;
    z-index: 10;
    -webkit-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    -moz-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    -o-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    -ms-transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
    transition: max-height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container section p{
    font-style: italic;
    color: #777;
    line-height: 23px;
    font-size: 14px;
    padding: 20px;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}
.ac-container input:checked ~ section{
    -webkit-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    -moz-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    -o-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    -ms-transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    transition: max-height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
}
.ac-container input:checked ~ section.ac-small{
    max-height: 500px; /*auto*/
}

<div class="ac-container">
    <div>
        
        <input id="ac-1" name="accordion-1" type="checkbox" />
        <section class="ac-small">
            <p>Some content...Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content... Some content...  </p>
        </section>
        <label for="ac-1">About us</label>
        
    </div>    

<div>    
        <input id="ac-2" name="accordion-2" type="checkbox" />
        <section class="ac-small">
            <p>Some content... </p>
        </section>
        <label for="ac-2">About us</label>
</div>
</div>

这篇关于CSS 过渡自动高度不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆