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

Posted 2023-03-06

【中文标题】CSS过渡不适用于变换：翻译

【英文标题】：CSS transition not working with transform: translate

【发布时间】：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%)

【参考方案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>

参考资料：

Full list of animatable properties in CSS Transitions on the display: property

【参考方案2】：

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

【讨论】：

有了opacity 和z-index，为什么需要visibility？

这对于一些罕见的情况是安全的，其中元素位于没有背景的元素之下和/或它比它大。