如何防止css动画在页面加载时运行 [英] how to prevent css animation from running on page load

问题描述

我有一个容器 div 设置与 overflow：hidden 在两张卡之间交换，只有一个可见a time：

I have a container div set with overflow:hidden that swaps between two cards, with only one visible at a time:

[card 1 | card 2]

我有jquery设置，以便当用户单击按钮时，在 div 上有一个类 .slid ，使用手写笔样式更改

I have jquery set up so that, when a user clicks on a button, it toggles a class, .slid, on the div, with stylus styling that changes its margin-left parameter to -400 or so.

     .container
            &.slid {
                margin-left: -400px;

我想写一个动画，让卡片来回滑动，所以我改变了我的手写笔代码

I wanted to write an animation so that the cards will slide back and forth instead, so I changed my stylus code to

       .container{
            animation: slideout 1s;
            &.slid {
                margin-left: -400px;
                animation: slidein 1s;
            }

和相应的动画：

@keyframes slidein {
    from {
        margin-left: 0px;
    }

    to {
        margin-left: -400px
    }

}

@keyframes slideout {
    from {
        margin-left: -400px;
    }

    to {
        margin-left: 0px;
    }

}

但我有一个问题：由于触控笔代码设置为在加载时运行动画，页面刷新将在页面加载时运行 slideout 动画。

This also works more or less as intended, but I have one problem: since the stylus code is set to run the animation on load, a page refresh will run the slideout animation on page load. Is there a way around this easily that still preserves the animations sliding back and forth?

推荐答案

在我看来，我认为，而不是将slitleut动画应用于容器并切换定义slidein动画的单个.slid类的应用程序，应该执行以下操作：

In my opinion I think that instead of applying the slideout animation to the container and toggling the application of a single .slid class which defines the slidein animation, you should do as following:

1-不应用动画直接到容器类。

1- Do not apply the animation directly to the container class.

2-定义两个类.slid-in（您当前的.slid）和.slid-out分别定义slidein和slideout动画。例如：

2- Define two classes .slid-in (your current .slid) and .slid-out that define the slidein and slideout animations respectively. Something like:

.container{
        &.slid-in {
            margin-left: -400px;
            animation: slidein 1s;
        }
        &.slid-out {
            margin-left: 0px;
            animation: slideout 1s;
        }
}

3-更新您的代码以便应用。

3- Update your code in order to apply the .slid-in class the first time the button is pressed, and toggling between .slid-in and .slid-out afterwards.

通过这样做，你可以防止在第一次按下按钮时滑入类中，然后在.slid-in和.slid-out之间切换。在页面加载时应用的slitleut动画，因为.container类立即应用于您的解释。

By doing it this way, you would prevent the slideout animation to be applied on page load, since the .container class is applied right away as deduced from your explanation.

这篇关于如何防止css动画在页面加载时运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！