CSS过渡不适用于变换：翻译答案

【问题标题】：CSS transition not working with transform: translateCSS过渡不适用于变换：翻译
【发布时间】：2016-12-03 07:35:27
【问题描述】：

如何实现移动菜单的平滑过渡？

transform 属性正在工作，但我希望它慢慢发生..

我的 Sass 看起来像这样

  .mobile-nav
   display: none
   position: relative
   width: 100%
   background: $white
   padding: 30px 0 20px
   transform: translateY(-100%)

    @media (max-width: 775px)
     .mobile-nav.is-o
      display: block
      transform: translateY(0%)

【问题讨论】：

标签： css animation sass css-transitions

【解决方案1】：

您面临的主要障碍是display 属性不可设置动画。

就像电灯开关一样，display: none 关闭，display: block 开启。没有中间地带，没有淡入淡出效果，没有 CSS 过渡。

但是，您可以将多个其他属性用于过渡。其中：

height
opacity
z-index
background-color

这是一个例子：

.mobile-nav-toggle {
  font-size: 2em;
  cursor: pointer;
}
.mobile-nav {
  display: inline-block;
  overflow: hidden;
  width: 0;
  height: 0;
  opacity: 0;
  transition: width 1s, height 1s, opacity 0s 1s, background-color 0s 2s;
}
.mobile-nav-toggle:hover + .mobile-nav {
  width: 150px;
  height: 150px;
  opacity: 1;
  background-color: lightgreen;
  transition: 1s;
}

<div class="mobile-nav-toggle">&#9776;</div>
<div class="mobile-nav">
  <ul>
    <li><a>Item</a></li>
    <li><a>Item</a></li>
    <li><a>Item</a></li>
  </ul>
</div>

参考资料：

【讨论】：

【解决方案2】：

我个人使用 opacity 结合 visibility 来实现我想要的整个元素的淡入淡出效果。请记住操作 z-index，这样您“隐藏”的对象在消失时将无法点击。

【讨论】：

有了opacity 和z-index，为什么需要visibility？
这对于一些罕见的情况是安全的，其中元素位于没有背景的元素之下和/或它比它大。