CSS从显示无切换到显示块,反之亦然

Question

我知道这个问题可能已经在这里问了几百万次,但我尝试了大部分解决方案,我只是不知道为什么它对我不起作用.

所以我有一个display最初针对的下拉列表none.当我点击它时,它显示了很好的过渡.(到现在为止还挺好).但当我再次点击它去隐藏下拉列表时,它会立即隐藏,但我不想要那样.我想隐藏在分配给show的类似转换中.这是我的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

Answer 1

display你的元素在任何时候,只有transition任何animatable财产.在你的情况下,opacity看起来像一个很好的候选人,虽然玩transform也可能会给你想要的结果.简单的例子:

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

实际上,opacity并且transform应该是您应该设置动画的唯一两个属性,因为它们不需要DOM对动画元素以外的任何内容进行重新绘制,因此即使您同时为相当多的元素设置动画,也不会达到浏览器性能.

请注意,即使没有涂漆,您的元素实际上也是在没有transform编辑时的位置.因此,pointer-events:none当它们处于"不可见"状态时以及pointer-events:all当它们处于"可见"状态时,您可能想要给它们,因此它们在不可见时不会捕获任何指针事件.

考虑到你的例子,我给你了两个动画例子(有关键帧和没有关键帧).记住你需要prefix your code.要获得完全的浏览器兼容性,请> 0%在设置中使用(底部的小方框).

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适用并且它不再捕获菜单开启者之外的鼠标事件.