CSS 过渡和动画不起作用

Question

我正在尝试实现一个动画，如果用户单击标签，（最初隐藏的）div 将从上到下打开，如果他们再次单击它，div 将关闭从下到上都很好。

/* Firstly I tried using css transitions but it does not work 
at all as the entire div just opened without as transition*/
input.trigger+div.mapInfo {
  display: none; /* div originally hidden */
  height: 0px;
  max-height: 0px;
  transition: all 300ms;
}

input.trigger:checked+div.mapInfo {
  display: block;/*div shown*/
  height: auto;
  max-height: 500px;
}

/*Then I tried using max-height,min-height, and height for 
transitions but it still doesn't work*/

input.trigger + div.mapInfo{
   display:none;
   min-height:0px;
   max-height:0px;
   transition:all 300ms;
}




input.trigger:checked + div.mapInfo{
   display:block;
   min-height:300px;
   max-height:500px;
   height:auto;
}


/*Hence, I deleted the transition code and tried css 
animations now the div opens up nicely  but still closed 
without animations*/
input.trigger+div.mapInfo {
  display: none;
  animation: close-up 300ms linear forwards;/*this line of code appears to be not working*/
}

input.trigger:checked+div.mapInfo {
  display: block;
  animation: open-up 300ms linear forwards;
}

@keyframes close-up {
  0% {
    max-height: 500px;
  }
  100% {
    max-height: 0px;
  }
}

@keyframes open-up {
  0% {
    max-height: 0px;
  }
  100% {
    max-height: 500px;
  }
}
/* Further more I tried using transform:scaleY() and 
replacing the max-height, but closing the div still has no animations */
@keyframes close-up{
0%{
   transform:scaleY(1)
}
   100%{
   transform:scaleY(0);
}
}
@keyframes open-up{
   0%{
transform:scaleY(0);
   }
   100%{
transform:scaleY(1);
   }
}

<!-- the label that user clicks on -->
<label id="marker6" class="battleMarkers" for="trigger6"><img src="ss_marker.png" alt="" /></label>

<input class="trigger" type="checkbox" id="trigger6">
<!-- the div to be opened-->
<div class="mapInfo" id="info6">
  <h2>Sword Beach</h2>
  <p>Sword was the easternmost landing site of the Normandy Invasion. Sword was divided into several sectors with each sector divided into beaches. Sword is located about 9 miles from Caen, the goal of the 3rd Infantry Division.</p>
  <p>The Sword landing suffered few casualties but it's route inland suffered from traffic congestion that limited the invasion's effectiveness. Troops at Sword experienced the only armour counter-attack of D-Day, mounted by the 21st Panzer Division.</p>
</div>

注意：这个问题不同于`，因为his/her div的起始高度为10px，而我的从一开始就隐藏了。

Answer 1

我不确定这是否是你想要做的。但我只是改变了过渡而不是去显示，我改变了文本颜色。如果要添加图像，也可以使用可见性。根据 W3schools.com，显示属性不可设置动画。这就是为什么当您取消选中该框时它会立即转到 display:none 且没有过渡效果。

input.trigger+div.mapInfo {
  display:hidden; /* div originally hidden */
  color:rgba(0,0,0,0);
  height: 0px;
  overflow:hidden;
  transition:1s;
}

input.trigger:checked+div.mapInfo {
  display: block;/*div shown*/
  color:rgba(0,0,0,1);
  height: 500px;
  transition:1s;
}

<!-- the label that user clicks on -->
<label id="marker6" class="battleMarkers" for="trigger6"><img src="ss_marker.png" alt="" /></label>

<input class="trigger" type="checkbox" id="trigger6">
<!-- the div to be opened-->
<div class="mapInfo" id="info6">
  <h2>Sword Beach</h2>
  <p>Sword was the easternmost landing site of the Normandy Invasion. Sword was divided into several sectors with each sector divided into beaches. Sword is located about 9 miles from Caen, the goal of the 3rd Infantry Division.</p>
  <p>The Sword landing suffered few casualties but it's route inland suffered from traffic congestion that limited the invasion's effectiveness. Troops at Sword experienced the only armour counter-attack of D-Day, mounted by the 21st Panzer Division.</p>
</div>

Answer 2

要使其正常工作，您至少需要更改高度。请确保您也将溢出设置为隐藏。

/* Firstly I tried using css transitions but it does not work 
at all as the entire div just opened without as transition*/

.mapInfo {
  height: 0px;
  overflow: hidden;
  transition: height 300ms;
}

.trigger:checked ~ .mapInfo {
  height: 500px;
}

<!-- the label that user clicks on -->
<label id="marker6" class="battleMarkers" for="trigger6"><img src="ss_marker.png" alt="" /></label>

<input class="trigger" type="checkbox" id="trigger6">
<!-- the div to be opened-->
<div class="mapInfo" id="info6">
  <h2>Sword Beach</h2>
  <p>Sword was the easternmost landing site of the Normandy Invasion. Sword was divided into several sectors with each sector divided into beaches. Sword is located about 9 miles from Caen, the goal of the 3rd Infantry Division.</p>
  <p>The Sword landing suffered few casualties but it's route inland suffered from traffic congestion that limited the invasion's effectiveness. Troops at Sword experienced the only armour counter-attack of D-Day, mounted by the 21st Panzer Division.</p>
</div>

CSS 过渡和动画不起作用

CSS Transitions and animations not working

css

css-selectors

css-animations