基础 6：如何使用 JavaScript 设置 .is-open-right translateX 值

Question

我正在使用 CSS 而不是 SCSS 使用 Foundation 6 构建网站。我在小屏幕上使用响应式 off-canvas 向下钻取菜单，默认情况下，off-canvas 菜单宽度为 250px。

问题：我希望这是浏览器的全宽 window。

设置宽度

我用JavaScript动态设置.off-canvas.position-right width为window的宽度，right为right的负宽度window。我还将 .off-canvas .drilldown max-width 设置为 window.

的宽度

效果很好，我是这样做的：

function setOffCanvasWidth() {

    var windowWidth = window.innerWidth,
        offCanvasRight = document.querySelector( '.off-canvas.position-right' ),
        isDrilldown = document.querySelector( '.off-canvas .is-drilldown' );

    offCanvasRight.style.width = windowWidth + "px";
    offCanvasRight.style.right = "-" + windowWidth + "px";
    isDrilldown.style.maxWidth = windowWidth + "px";

}
setOffCanvasWidth();

我对这部分很满意，但它只解决了一半的问题。

移动关闭-Canvas

除了处理菜单的宽度，.is-open-right 使用 transform: translateX().

将所有内容移动 -250px

我尝试在我的函数中包含这些行以将 transform: translateX() 值设置为 window:

的负宽度

var offCanvasWrapperInner = document.querySelector( '.off-canvas-wrapper-inner.is-off-canvas-open.is-open-right' );
offCanvasWrapperInner.style.transform = "translateX(-" + windowWidth + "px)";

但这没有用。我认为这与加载 window 时 .off-canvas-wrapper-inner 没有 class .is-open-right 这一事实有关。 class 是在单击汉堡包切换按钮后动态添加的，该按钮的 class 为 .menu-icon。所以我尝试添加一个 click 事件监听器，但它仍然不起作用。

这是我的完整 JS 代码：

function setOffCanvasWidth() {

    var windowWidth = window.innerWidth,
            offCanvasRight = document.querySelector( '.off-canvas.position-right' ),
            isDrilldown = document.querySelector( '.off-canvas .is-drilldown' ),
            menuIcon = docuemnt.querySelector( '.menu-icon' ),
            offCanvasWrapperInner = document.querySelector( '.off-canvas-wrapper-inner.is-off-canvas-open.is-open-right' );

    offCanvasRight.style.width = windowWidth + "px";
    offCanvasRight.style.right = "-" + windowWidth + "px";
    isDrilldown.style.maxWidth = windowWidth + "px";

    menuIcon.addEventListener( 'click', function() {
        offCanvasWrapperInner.style.transform = "translateX(-" + windowWidth + "px)";
    } );

}
setOffCanvasWidth();

我哪里错了？

我不一定要找任何人为我编写解决方案，但是任何关于我如何设置 .is-open-right translateX 值的反馈和指导都会非常有帮助。

这里是整个项目代码：https://github.com/paulshryock/paulshryock/releases/tag/v0.0.1
这是一个现场演示：https://paulshryock.github.io/paulshryock/

Answer 1

使用 -100% 的 translateX 值。百分比转换基于元素的尺寸，因此 100% 等于元素的宽度。此时不需要 JavaScript。

关于这一点，我建议将菜单的 left 设置为 100% 而不是将 right 设置为负宽度。

基础 6：如何使用 JavaScript 设置 .is-open-right translateX 值

Foundation 6: How to set .is-open-right translateX value with JavaScript

javascript

css

css-transforms

zurb-foundation

off-canvas-menu

设置宽度

移动关闭-Canvas

我哪里错了？