如何添加转换持续时间以切换 css class

Question

我想添加一个过渡持续时间，以便当您单击卡片时，下方的文本显示速度会慢一些。 现在，如果您单击它会立即显示文本。 这可能是简单的 css 事情，但我似乎无法弄清楚。 我尝试向.hidden class 添加过渡持续时间，但什么也没有？

 function openDropdown(dropdownId) { var allDropdowns = ["dropdown1", "dropdown2", "dropdown3", "dropdown4"]; const index = allDropdowns.indexOf(dropdownId); allDropdowns.splice(index, 1); document.getElementById(dropdownId).classList.toggle("hidden"); for (var i = 0; i < allDropdowns.length; i++) { document.getElementById(allDropdowns[i]).classList.add("hidden"); } }

 .card-row { display: flex; justify-content: space-evenly; align-items: center; background-image: url(./images/forest.jpg); background-position: center; background-repeat: none; padding: 3em; }.card { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1em; backdrop-filter: blur(5px); border-radius: 4px; background-color: rgba(255, 255, 255, 0.5); box-shadow: 2px 3px 5px rgba(17, 17, 17, 0.3); margin: 1em; max-width: 150px; color: whitesmoke; text-align: center; }.card-glass { background-color: rgba(83, 83, 83, 0.1); box-shadow: 2px 2px 4px rgba(17, 17, 17, 0.5); }.card:hover { background-color: #202020; }.card i { box-shadow: 2px 3px 10px rgba(0, 0, 0, 0); font-size: 2.5em; color: #272727; padding: 1em; }.fa-html5:hover { color: red; }.fa-css3-alt:hover { color: dodgerblue; }.fa-js:hover { color: gold; }.fa-react:hover { color: fuchsia; }.hidden { display: none; }

 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <div class="card-row"> <div class="card-glass"> <div class="card"> <i onclick="openDropdown('dropdown1')" class="fab fa-html5"></i> <div id="dropdown1" class="hidden">HTML5 with better management of web applications and content.</div> </div> </div> <div class="card-glass"> <div class="card"> <i onclick="openDropdown('dropdown2')" class="fab fa-css3-alt"></i> <div id="dropdown2" class="hidden">Cascading Style Sheets with new features to bring your ideas to life. </div> </div> </div> <div class="card-glass"> <div class="card"> <i onclick="openDropdown('dropdown3')" class="fab fa-js"></i> <div id="dropdown3" class="hidden">JavaScript, the language of the web with new features in ES6</div> </div> </div> <div class="card-glass"> <div class="card"> <i onclick="openDropdown('dropdown4')" class="fab fa-react"></i> <div id="dropdown4" class="hidden">React and React Native framework for rapid development</div> </div> </div> </div>

让我知道是否需要其他任何东西。

Answer 1

您应该使用可以转运的css。 display 属性不能被动画化。 尝试使用最小高度

 function openDropdown(dropdownId) { var allDropdowns = ["dropdown1", "dropdown2", "dropdown3", "dropdown4"]; const index = allDropdowns.indexOf(dropdownId); allDropdowns.splice(index, 1); document.getElementById(dropdownId).classList.toggle("hidden"); for (var i = 0; i < allDropdowns.length; i++) { document.getElementById(allDropdowns[i]).classList.add("hidden"); } }

 .card-row { display: flex; justify-content: space-evenly; align-items: center; height:300px; background-image: url(./images/forest.jpg); background-position: center; background-repeat: none; padding: 3em; }.card { transition: all.3s ease; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1em; backdrop-filter: blur(5px); border-radius: 4px; background-color: rgba(255, 255, 255, 0.5); box-shadow: 2px 3px 5px rgba(17, 17, 17, 0.3); margin: 1em; max-width: 150px; color: whitesmoke; text-align: center; cursor: pointer; }.card-glass { background-color: rgba(83, 83, 83, 0.1); box-shadow: 2px 2px 4px rgba(17, 17, 17, 0.5); }.card:hover { background-color: #202020; }.card i { box-shadow: 2px 3px 10px rgba(0, 0, 0, 0); font-size: 2.5em; color: #272727; padding: 1em; }.card:hover.fa-html5 { color: red; }.card:hover.fa-css3-alt { color: dodgerblue; }.card:hover.fa-js { color: gold; }.card:hover.fa-react { color: fuchsia; } /* ADDED STAFF */ div[id^="dropdown"] { max-height: 150px; transition:max-height.3s ease; overflow: hidden; color: black; }.card:hover div[id^="dropdown"] { color: whitesmoke; } div[id^="dropdown"].hidden { max-height:0; }

 <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <div class="card-row"> <div class="card-glass"> <div class="card"> <i onclick="openDropdown('dropdown1')" class="fab fa-html5"></i> <div id="dropdown1" class="hidden">HTML5 with better management of web applications and content.</div> </div> </div> <div class="card-glass"> <div class="card"> <i onclick="openDropdown('dropdown2')" class="fab fa-css3-alt"></i> <div id="dropdown2" class="hidden">Cascading Style Sheets with new features to bring your ideas to life. </div> </div> </div> <div class="card-glass"> <div class="card"> <i onclick="openDropdown('dropdown3')" class="fab fa-js"></i> <div id="dropdown3" class="hidden">JavaScript, the language of the web with new features in ES6</div> </div> </div> <div class="card-glass"> <div class="card"> <i onclick="openDropdown('dropdown4')" class="fab fa-react"></i> <div id="dropdown4" class="hidden">React and React Native framework for rapid development</div> </div> </div> </div>

PS在上面的剪辑中我编辑了一些东西，在路上：

1. 添加过渡到颜色变化
2. 更改卡 hover 上的图标颜色，而不是图标 hover。 否则，当卡片悬停但没有图标时，它看起来很糟糕
3. 为 flex 容器设置固定高度，这样当打开不同的项目时它不会改变高度