如何将我的 less 从 "display: block" 动画化到 "display: none"？

Question

我有一个隐藏和显示如下元素的 less 文件：

.cmp-accordion__panel {
      &--hidden {
      display: none;
   }

   &--expanded {
     display: block;
     -webkit-animation: slide-down 0.5s ease-out;
     -moz-animation: slide-down 0.5s ease-out;
  }
}


@-webkit-keyframes slide-down {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-5%);
 }
100% {
  opacity: 1;
  -webkit-transform: translateY(0);
   }     
}

@-moz-keyframes slide-down {
0% {
  opacity: 0;
  -moz-transform: translateY(-5%);
  }
  100% {
   opacity: 1;
  -moz-transform: translateY(0);
   }
}

在我的 JavaScript 中，如果事件被触发，我会在 "cmp-accordion__panel--hidden" 和 "cmp-accordion__panel--expanded" 之间切换元素的 class 名称。我使用关键帧和不透明度来设置从 "display:none" 到 "display:block" 的过渡动画。

但是，当我从 "display:block" 转到 "display:none" 以隐藏元素时，效果会立即发生。我应该添加什么来为隐藏设置动画？

Answer 1

您无法设置动画或从 display: block; 过渡到 display: none;，因此如果您希望设置动画，则需要将其删除。

为确保它淡出并被移除，您应该为 visibilty 和 opacity 属性设置动画。

或者，如果您使用 jQuery，您可以使用 .fadeOut() 函数。

MDN - CSS Visibility

jQuery - fadeOut()

Answer 2

如前所述，不可能从 display:block; 到 display: none; 设置动画或过渡，但这可以用另一种方式模拟，不需要使用 CSS 动画，只需 CSS 过渡（此外，不再需要使用供应商前缀来声明过渡或动画）。

请看this working example：

HTML（我插入了一个假的内容来创建一个高度比较大的元素）

<div class="cmp-accordion__panel--expanded">
  b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b<br>b
</div>

少

[class*="cmp-accordion__panel"] {
  border:solid 1px red;
  overflow:hidden;
  transition:opacity 0.3s ease-out, max-height 0.8s ease-out;
}

.cmp-accordion__panel {
   &--hidden {
      max-height:0;
      opacity:0;  
   }

   &--expanded {
     opacity:1;
     max-height:1000px;
  }
}

请注意，由于 attribute partial value selector，我还添加了一些适用于 *--hidden 和 *--expanded classes 的规则（我个人更喜欢通用的 class 并在某些情况下添加第二个，而不是在两个之间切换，但我不想改变太多你的方法）。

关键规则是在 max-height 属性的两个值之间切换，从 0 值到另一个“足够大”值。如果您有效地知道元素的最终高度，您也可以简单地使用 height 属性，但在动态内容的情况下，max-height 就可以了。

另请注意 overflow:hidden; 应用于两个 classes，以模拟高度变化。

最后，动画效果仅依赖于 CSS 应用到 opacity 和 max-height 属性的过渡，使用不同的时间来增强效果。

如何将我的 less 从 "display: block" 动画化到 "display: none"？

How can I animate my less from "display: block" to "display: none"?

css

keyframe

less

css-animations