Foundation 6 向下钻取动画速度

【问题标题】：Foundation 6 Drilldown Animation SpeedFoundation 6 向下钻取动画速度
【发布时间】：2023-03-30 01:19:02
【问题描述】：

我的目标是将自定义动画速度应用到 Foundation 6 For Sites 中的 Foundation 6 向下钻取菜单。我知道在_settings.scss 中，您可以通过$drilldown-transition 更改初始点击动画，但是在向下钻取中返回级别时会忽略动画参数。

我检查了dist > assets > css > app.css 以查看是否有其他参数或某种隐藏的 CSS 位在控制它，但对我来说很明显它是通过 JS 处理的，而不仅仅是添加/删除类。

TLDR；我正在寻找有关在返回关卡与前进关卡时如何控制向下钻取菜单的动画速度/样式的见解。

经验：https://media.giphy.com/media/X8M8Hax10K9SslPN1v/giphy.gif

【问题讨论】：

标签： javascript jquery css animation zurb-foundation

【解决方案1】：

关闭速度是由于以下几行，可在dist > assets > css > app.css中查看

.drilldown .is-drilldown-submenu.is-active {
    z-index: 1;
    display: block;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%); 
    }

  .drilldown .is-drilldown-submenu.is-closing {
    -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
            transform: translateX(100%); 
    }

从-100% 到100% 的转变过于极端，无法真正获得您所期望的流畅感觉。将100% 减少到5% 解决了这个问题。

.mobile_nav > .grid-x > .cell > .is-drilldown .drilldown .is-drilldown-submenu.is-closing {
      -webkit-transform: translateX(5%);
          -ms-transform: translateX(5%);
              transform: translateX(5%);
    }

【讨论】：