将过渡添加到onClick div

Question

我正在尝试平滑过渡。当单击该部分时，它会扩展以显示下面的文本。我想对此添加一个过渡，使其变得更慢、更流畅。

我试图通过向"active“类添加一个转换来做到这一点，但这并不好。

仅供参考-仍在学习JS和高级CSS，所以我的知识有限！

提前感谢！

​

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
      
    }
  });
}

.third-last {
    width:28%;
    float: left;
}

.third {
    width: 28%;
    float: left;
    margin-right: 85px;
}

.team-member {
    width: 100%;
    margin-bottom: 50px;
    -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
    border-radius: 20px;
    transition:3s;
    -webkit-transition:3s;
}

.content {
        display: none;
        padding-left: 30px;
        padding-right: 30px;
        padding-bottom: 30px;
      }
.team-role {
    padding-left: 30px;
    padding-top: 40px;
    padding-bottom: 20px;
}

<div class="container">
    <div class="third">
        <div class="team-member">
            <div class="collapsible">
                <img src="http://localhost/testsite/wordpress/wp-content/uploads/2020/01/.jpg">
                <div class="team-role">
                    <h3>text</h3>
                    <p>text</p>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.</p>
            </div>
        </div>
        <div class="team-member">
            <div class="collapsible">
                <img src="http://text.jpg">
                <div class="text">
                    <h3>text</h3>
                    <p>Managing Director</p>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.</p>
            </div>
        </div>
    </div>
    <div class="third">
        <div class="team-member">
            <div class="collapsible">
                <img src="http://localhost/testsite/wordpress/wp-content/uploads/2020/01/Charlie-Conway-Product-Designer-Simple-Design-Works.jpg">
                <div class="team-role">
                    <h3>text</h3>
                    <p>text</p>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.</p>
            </div>
        </div>
        <div class="team-member">
            <div class="collapsible">
                <img src="http://localhost/testsite/wordpress/wp-content/uploads/2020/01/Charlie-Conway-Product-Designer-Simple-Design-Works.jpg">
                <div class="team-role">
                    <h3>text</h3>
                    <p>text</p>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.</p>
            </div>
        </div>
    </div>
    <div class="third-last">
        <div class="team-member">
            <div class="collapsible">
                <img src="http://localhost/testsite/wordpress/wp-content/uploads/2020/01/Charlie-Conway-Product-Designer-Simple-Design-Works.jpg">
                <div class="team-role">
                    <h3>text</h3>
                    <p>Managing Director</p>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.</p>
            </div>
        </div>
        <div class="team-member">
            <div class="collapsible">
                <img src="http:///testsite/wordpress/wp-content/uploads/2020/01/.jpg">
                <div class="team-role">
                    <h3>text</h3>
                    <p>Managing Director</p>
                </div>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
                    et
                    dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                    aliquip
                    ex ea commodo consequat.</p>
            </div>
        </div>
    </div>

    
</div>

​

Answer 1

您不能将display:none;转换为display:block;，这是我在JS中所做的更改，以使其正常工作：

let teams = document.querySelectorAll(".team-member");
//note forEach is equal to your for(i ...) and the (team) is your "this" variable 
teams.forEach((team) => {
    let col = team.firstElementChild;
    let content = team.lastElementChild;

    let colH = col.clientHeight;
    let contentH = content.clientHeight;    
    team.style.height = `${colH}px`

    team.addEventListener("click", () => {

        if (team.style.height == `${colH}px`) {
      team.style.height = `${colH + contentH}px`
    } else {
      team.style.height = `${colH}px`
    }
    });
});

我还向您的团队成员类添加了overflow:hidden;，我建议您学习使用forEach函数，它们比for(i ...)要好得多

Answer 2

显示:无/块不能处理过渡。你应该通过defauld opacity: 1；transition：.5s ease opacity；向你的可折叠类添加样式属性。

.collapsible {
    opacity: 1;
    transition: ease 0.5s opacity;
}
.is-fadeout {
    opacity: 0; 
}

添加这个.is-fadeout类onclick，在0.5秒超时后添加属性display none