HTML/JS 动画可折叠不起作用 - 如何解决问题-Toy模板网

问题描述

我希望向下打开的动作和向上的动作一样是平滑的动画，但是不起作用。

JS

var arrow = document.getElementById("arrow");
var content = document.getElementById("content");
var arrow_icon = document.getElementById("arrow_icon");

function arrow_click() {
    content.style.display = (content.style.display == 'block') ? 'none' : 'block';
    //content.style.visibility = (content.style.visibility == 'visible') ? 'hidden' : 'visible';
    //content.style.opacity = (content.style.opacity == '100') ? '0' : '100';
   
    if (content.style.maxHeight){
        content.style.maxHeight = null;
    }
    else {
        content.style.maxHeight = content.scrollHeight + "px";
    }
   
    arrow_icon.className = (arrow_icon.className == "fa fa-angle-down") ? "fa fa-angle-up" : "fa fa-angle-down";
}

CSS

html{
    font-family:sans-serif;
}

.question_box{
    width:300px;
    border-radius:25px;
    background-color:#9DD36E;
    padding:25px;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    -moz-transition: max-height 0.2s ease-out; /* Firefox 4 */
    -webkit-transition: max-height 0.2s ease-out; /* Safari and Chrome */
    -o-transition: max-height 0.2s ease-out; /* Opera */
    -ms-transition: max-height 0.2s ease-out; /* Explorer 10 */
}

.question_div{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:15px;
    font-size:30px;
    font-weight:bold;
}

.links_div{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    font-size:25px;
}

.answers_div{
    margin-top:15px;
    margin-left:10px;
    margin-right:10px;
    text-align:justify;
}

.content{
    display:none;
    //visibility:hidden;
    //opacity:0;
    max-height:0;
}

.arrow{
    margin-top:15px;
    text-align:center;
    font-weight:bold;
    font-size:45px;
}

HTML

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body><div class="question_box">    
   
    <div class="question_div collapsible">
        What is lorem ipsum?
    </div>
   
    <div id="content" class="content" style="display: none;">
        <div class="links_div">
            1,2,3       </div>
       
        <div class="answers_div">
        Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.       </div>
    </div>

    <div id="arrow" class="arrow" onclick="arrow_click();">
        <i id="arrow_icon" class="fa fa-angle-down"></i>
    </div>
   
</div>  
   
</body></html>

问题解决于讨论

以上代码存在问题，通过修改后问题解决，请注意 display 与 opacity 的使用

HTML 添加慢速过渡

<div id="content" class="content" style="transition: all 0.3s;">
...
</div>

CSS 使用 opacity:0 而不是 display:none

.content{
    opacity:0;
    max-height:0;
}

JS 并使用此函数来更改不透明度和最大宽度

function arrow_click() {
    content.style.opacity = (content.style.opacity == '100') ? '0' : '100';
   
    if (content.style.maxHeight){
     content.style.maxHeight = 0+'px';
        }
    else {
        content.style.maxHeight = content.scrollHeight + "px";
    }
   
    arrow_icon.className = (arrow_icon.className == "fa fa-angle-down") ? "fa fa-angle-up" : "fa fa-angle-down";
}

文章来源地址https://www.toymoban.com/diary/web/295.html

到此这篇关于HTML/JS 动画可折叠不起作用 - 如何解决问题的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！