在页面调整大小时禁用 CSS animation

Question

我有一个精灵 animation 在选中复选框时发生（使用：checked 伪 - 所以真的'如果'选中了复选框）。 我在 640px 处有一个断点，它隐藏了复选框。 问题是当页面大小调整为小于 640px 宽并且复选框已被选中时，animation 会播放。 我只希望 animation 由于用户选中复选框而发生。

我尝试使用带有超时的调整大小事件侦听器来停止 animation，但是一旦用户停止调整页面大小，animation 就会播放。 这是执行 animation 的 css：

@include bp-mobile {  /*this is the query that sets the max-width to 640px */
.toggler:checked ~.group {
        visibility: visible;  /* otherwise not visible */
        transform: translateX(0px);
        animation: menuPatch 175ms steps(8);
        animation-iteration-count: 1;
        animation-delay: 50ms;
    }
}

我可能应该指出 class 组是一个 ul，而该 ul 上的背景图像是正在动画的精灵。 我正在尝试制作两个菜单，一个用于移动布局，一个用于桌面。 对于移动布局，我希望菜单是可切换的，并且 animation 在切换时只出现一次。

如果我不得不猜测发生了什么，它会是这样的：如果菜单打开（.toggler:checked）并且用户将页面大小调整为小于 640px，css 看到切换被选中，并播放 animation（因为任何大于 640 像素的屏幕会将切换可见性设置为“隐藏”，否则不会应用任何样式）。 如何在不使用任何框架的情况下停止这种情况？

Answer 1

您可以移除隐藏的可见性并将切换移出视图区域超过 640 像素。 对于小于 640 像素的屏幕，您可以带回切换器。 这将有助于播放 animation 但对于超过 640 像素的屏幕在屏幕上不可见。

 // For less than 640px.toggler:checked~.group { transform: translateX(0px); animation: menuPatch 175ms steps(8); animation-iteration-count: 1; animation-delay: 50ms; }.toggler~.group { position: absolute; left: -1000px; }

Answer 2

我最终将我的@keyframes 规则和上面的代码移到了媒体查询之外，这就成功了——即使切换可见性设置为隐藏。

/* for any screen size */
.toggler:checked ~.group {
    visibility: visible;
    transform: translateX(0px);
    animation: menuPatch 175ms steps(8);
    animation-iteration-count: 1;
    animation-delay: 50ms;
}

 /* Mobile Menu Background */
    .group {
        margin: 0;
        text-align: center;
    @include bp-mobile {     /* stuff I need to happen to the ul for mobile */
        background-image: url(../pictures/mobile-sprite.png);
        background-position-x: right; 
        background-repeat: no-repeat;
        margin-top: 60px;
        padding: 20px;
        padding-top: 80px;
        box-sizing: border-box;
        width: 200px;
        height: 341px;
        transform: translateX(-200px);
    }
        @keyframes menuPatch {
            from {
                background-position-x: 0px;
            }
            to {
                background-position-x: -1600px;
            }
        }
    
        /* End mobile menu background */
    }