CSS从无显示过渡到显示块，反之亦然 [英] CSS Transition from display none to display block and vice versa

问题描述

我知道这个问题在SO中可能已经问过百万次了，但是我尝试了大多数解决方案，我只是不知道为什么它对我不起作用.

I know this question has probably been asked million times here in SO, but Ive tried most of the solution, I just dont know why it dont work for me.

所以我有一个下拉菜单，其中display最初是针对none的.当我单击它时，它显示出不错的过渡效果. (到目前为止，一切都很好).但是，当我再次单击它以隐藏下拉菜单时，它会立即隐藏，但是我不希望这样.我想隐藏分配给显示的类似过渡.这是我的CSS代码:

So I have a dropdown with display initially targeted to none. When I click on it, it shows nice transition. (So far so good). But when I click on it again to go hide the dropdown, it hides immediately, but I dont want that. I want to hide with similar transition that was assigned to show. Here is my code for CSS:

.dropdown-menu {
  padding: 0 0;
  display: none;
  -webkit-animation: slide-down .3s ease-out;
  -moz-animation: slide-down .3s ease-out;
}

.table-dropdown-open {
  display: block;
  -webkit-animation: slide-down .3s ease-out;
  -moz-animation: slide-down .3s ease-out;
}

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

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

这不是复制品，因为我试图从block过渡到 none.不是从none到block

This is not a dupliacte because Im trying to give transition from block to none. Not from none to block

推荐答案

display始终是您的元素，并且仅transition任何animatable属性.在您的情况下，opacity看起来很不错，尽管与transform玩耍也可能会给您带来理想的结果.简单示例:

display your element at all times and only transition any animatable property. In your case, opacity looks like a good candidate, though playing with transform might also give you the desired result. Simple example:

any {
  transform: scale(0);
  transition: transform .4s cubic-bezier(.5,0,.3,1);
}
any.animated {
  transform: scale(1);
}

实际上，opacity和transform应该是您应该设置动画的仅有的两个属性，因为它们不需要DOM在动画元素之外的任何其他位置上重画，因此即使您处于活动状态也不会影响浏览器性能同时对大量元素进行了动画处理.

In effect, opacity and transform should be the only two properties you should animate, as they don't require DOM repaint on anything other than the animated element, thus not hitting browser performance, even when you're animating a considerable amount of elements simultaneously.

请注意，即使没有绘制，您的元素实际上仍然位于根本没有transform的位置.因此，当它们处于不可见" 状态时，可能要给它们pointer-events:none，而当它们处于可见" 状态时，给它们pointer-events:all，这样它们就不会在不可见的情况下捕获任何指针事件.

Please note that, even if not painted, your elements are, in effect, in the place where they would be when not transformed at all. So you might want to give them pointer-events:none when they are in the "invisible" state and pointer-events:all when they are in "visible" state, so they don't catch any pointer events while not visible.

考虑到您的示例，我给了您两个动画示例(有关键帧和无关键帧).请记住，您需要 prefix your code .为了完全兼容浏览器，请在设置(底部的小框)中使用> 0%.

Considering your example, I've given you two animation examples (with keyframes and without). Remember you need to prefix your code. For full browser compatibility, use > 0% in settings (the small box at the bottom).

setTimeout(function(){
  var dm = document.querySelector('.dropdown-menu');
  dm.classList.remove('hide-menu');
}, 300);

/* simple animation example, on parent. No keyframes. */
.dropdown-menu.hide-menu {
  opacity: 0;
}
.dropdown-menu {
  opacity: 1;
  transition: opacity .2s cubic-bezier(.4,0,.2,1);
  position: relative;
  animation: delay-overflow .3s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}
.dropdown-menu:hover {
  animation: none;
  cursor: pointer;
}

/* animation example with keyframes, on child */

.dropdown-menu ul {
  position: absolute;
  margin-top: 0;
  padding-top: 1rem;
  top: 100%;
  opacity: 0;
  transform: translateY(-10%);
  animation: slide-up .3s;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.drowdown-menu.hide-menu ul {
  animation-duration: 0s;
}
.dropdown-menu:hover ul {
  animation: slide-down .3s;
  animation-fill-mode: forwards;
}


@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10%);
  }
}
@keyframes delay-overflow {
  0% {
    overflow: visible;
  }
  99% {
    overflow: visible;
  }
  100% {
    overflow: hidden;
  }
}

<div class="dropdown-menu hide-menu">
  <span>Menu</span>
  <ul>
    <li>A menu item</li>
    <li>Another menu item</li>
    <li>...</li>
    <li>And so on...</li>
  </ul>
</div>

注意:使用animation属性的一个非常方便的技巧是，它允许您延迟应用任何属性，即使是非动画属性也要延迟所需的时间.我正在使用此技巧来延迟overflow:hidden在父级上的应用(并且overflow是不可设置动画的)，因此可以看到子级的动画(发生在父级边界之外)，直到结束为止.完成后，overflow:hidden将应用，并且不再捕获菜单打开器之外的鼠标事件.

Note: A very handy trick with animation property is that it allows you to delay applying any property, even non-animatable ones from applying for the desired amount of time. I'm using this trick to delay overflow:hidden applying on the parent (and overflow is not animatable) so the animation of the child - which happens outside the bounds of the parent - is visible until the end. After it finishes, the overflow:hidden applies and it no longer catches mouse events outside the menu opener.

这篇关于CSS从无显示过渡到显示块，反之亦然的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！