如何添加过渡持续时间以切换 CSS 类

Question

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

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>

附：在上面的片段中，我还在路上编辑了一些东西：

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