如何防止css动画在页面加载时运行答案

【问题标题】：how to prevent css animation from running on page load如何防止css动画在页面加载时运行
【发布时间】：2014-06-09 10:09:24
【问题描述】：

我有一个容器div 设置有overflow:hidden，可以在两张卡之间交换，一次只能看到一张：

[card 1 | card 2]

我设置了 jquery，这样当用户单击按钮时，它会在 div 上切换一个类 .slid，并使用手写笔样式将其 margin-left 参数更改为 -400 左右.

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

这一切都有效；每当您按下按钮时，卡片就会来回翻转。

我想写一个动画，让卡片来回滑动，所以我将手写笔代码更改为

       .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 动画。有没有办法轻松解决这个问题，仍然保留来回滑动的动画？

【问题讨论】：

标签： javascript jquery css animation stylus

【解决方案1】：

在我看来，我认为与其将滑出动画应用于容器并切换定义滑入动画的单个 .slid 类的应用程序，不如执行以下操作：

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

2- 定义两个类 .slid-in（您当前的 .slid）和 .slid-out 分别定义滑入和滑出动画。比如：

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

3- 更新您的代码，以便在第一次按下按钮时应用 .slid-in 类，然后在 .slid-in 和 .slid-out 之间切换。

通过这样做，您可以防止在页面加载时应用滑出动画，因为 .container 类会根据您的解释立即应用。

【讨论】：

【解决方案2】：

您可以通过将 CSS 放置在页面底部来影响 CSS 的加载顺序。这将确保在应用 CSS 之前加载 html。当然，如果您使用 javascript 或 AJAX 引入东西，这将不是一个防弹的解决方案。如果所有元素都在html本身中应该没问题。

希望对你有帮助！

【讨论】：