Question

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

[card 1 | card 2]

我设置了jquery，以便当用户点击某个按钮时，它会在.slid上切换一个类div，并使用更改其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动画。有没有办法轻松地保持动画来回滑动？

Answer 1

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

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

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

.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类会立即应用，从您的解释中推断出来。

Answer 2

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

我希望有所帮助！

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

2 个答案: