登录
当前位置： 首页 > 面试题库 >

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

越鸿才
2023-03-14
问题内容：

我有一个网站，我决定用纯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>

问题答案：

如果您只想使用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>


 类似资料：
  • CSS过渡自动宽度

    问题内容： 我有一个元素，其内容更改时我想为其宽度设置动画。它具有，并且永远不会改变。我已经看到了这个技巧，但这是为了在两个值之间进行转换并设置一个。我根本不操纵值，仅操纵内容，我希望元素的大小随动画而变化。CSS完全有可能吗？ 这是我的代码的简化版本： 当用户将鼠标悬停在元素上时，我希望更改的大小可以动画。 问题答案： 正如我所评论的，还不能设置动画，所以请使用/ 技巧，或者，如果需要更精确的设

  • CSS高度百分比无法正常工作

    问题内容： 这个问题已经在这里有了答案 ： 高度百分比HTML 5 / CSS （6个答案） 3年前关闭。 我有以下简单的代码： 但是div不会以高度为100％显示。为什么？ 问题答案： 您需要在所有父元素上设置100％的高度，在这种情况下，您的正文和html都应设置为100％。这个小提琴显示它正常工作。

  • 高度：calc（100％）在CSS中无法正常工作

    问题内容： 我有一个div，我要填充整个身体高度，而不要填充以像素为单位的设定值。但是我不能上班。 我要执行此操作的原因是，我的元素具有基于某些不同标准的动态高度，例如，标头的高度根据其可以包含的不同元素而变化。然后，内容div需要扩展以填充剩余的可用空间。 但是，div元素保持内容的高度-好像并不能将100％解释为body元素的高度。 我将不胜感激任何帮助或朝着正确方向的指点。 问题答案： 您需

  • 用CSS过渡动画最大高度

    问题内容： 我想创建仅由类名支持的展开/折叠动画（使用JavaScript来切换类名）。 我要上一堂课 另一个（我也尝试过value ，它根本没有动画） 进行动画处理： 我使用CSS过渡在它们之间进行切换，但是浏览器似乎在为所有这些多余的动画设置动画，因此它会延迟折叠效果。 有没有办法做到这一点（本着同样的精神- 使用CSS类名）没有副作用（我可以减少像素数，但是显然有缺点，因为它可能会切断合法文

  • 动画和过渡的组合无法正常工作

    问题内容： 我一直在尝试放置一些基本的CSS3动画。目的是在按钮的click事件上切换类，并根据添加的类为div设置动画。该代码非常适合Firefox中的第一个切换迭代，但是对于Chrome等其他浏览器以及Firefox中的下一个迭代，只需瞬间即可切换。请帮助我找出问题所在。 片段： 我也在这里准备了一个小提琴。 问题答案： 这是Chrome的一种已知行为。Firefox似乎确实能够在过渡过程中顺

  • 设置CSS最高百分比无法正常工作

    问题内容： 我尝试了响应式CSS布局，但是“ top：50％”不能工作，而“ left：50％”可以。为什么会这样呢？ 问题答案： 定义父容器的尺寸，例如div： 要么 另一种方法是通过其顶部，底部，左侧和右侧属性来拉伸父容器（即div）。像这样：

相关阅读

动画和过渡的组合无法正常工作设置CSS最高百分比无法正常工作角度2 ngIf和CSS过渡/动画CSS：动画与过渡解决vue的过渡动画无法正常实现问题

相关文章

Python高级玩法：实现自动批改作业DevOps自动化工具百度前端日常一面（过）Python 写一个让工作自动向你汇报进度的脚本CSS透明度

相关问答

angular 2 ngIf和CSS过渡/动画Spring Security无法正常工作无法使Matplotlib正常工作（？）android: smoothScrollToPosition()无法正常工作ViewPager.SetOffScreenPageLimit(0)无法正常工作

相关工具

动态调整UITableViewCell的高度数据库自动更新及自动赋值工具企户动CSS框架无尽的进度条高仿新百度贴吧列表效果

相关文档

Android 研发工程师高级进阶iOS 核心动画高级技巧NEI 接口文档管理平台配套自动化工具文档动手学深度学习 v1动手学深度学习 v2
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.