1. 首页
  2. 问题
  3. CSS过渡自动高度无法正常工作
小编典典

CSS过渡自动高度无法正常工作

css

我有一个网站，我决定用纯CSS代码段替换基于jquery的切换框。当我使用固定的高度值进行过渡时（CSS的最后几行），效果很好，但是使用该auto值时，动画丢失了，只有高度变化才起作用！

有没有办法将其与自动值一起使用？我想使用可变文本而不使用脚本。

.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>

阅读 359

收藏
2020-05-16

共1个答案

小编典典

如果您只想使用CSS，则一种解决方案是过渡max-height而不是height将其设置为比以往任何时候都更大的值…

您将需要稍稍缩短转换的速度，但是至少该示例使您对如何完成转换有所了解。别忘了在过渡中更改属性。从transition: height0.5s;到transition: max-height 0.5s;。

希望这可以帮助！

.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>
2020-05-16