Question

如何实现手机菜单的平滑过渡？

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%)

Answer 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>

参考文献：

Answer 2

我个人使用不透明度结合可见性来实现淡化效果，就像我想要的整个元素一样。请记住操纵 z-index ，这样当您消失时，“隐藏”对象将无法点击。

CSS转换不适用于transform：translate

2 个答案: