页面加载时的运动UI不起作用

Question

我正在使用Foundation 6，并且正在我的SASS文件中导入Motion UI Transitions和Animations。

但是当做类似下面的事情时，不会出现任何动画。我错过了什么？！

.site-logo {
    text-align: center;
    margin-bottom: 0.4rem;
    @include mui-animation(spin(in, 360deg));
}

由于

Answer 1

mui-animation 本身不会设置 animation-duration 属性，因此您不会看到动画“正在播放”。

试试这个：

.site-logo {
    text-align: center;
    margin-bottom: 0.4rem;
    @include mui-animation(spin(in, 360deg));

    animation-duration: map-get($motion-ui-speeds, default);
    // Or:
    // animation-duration: 500ms;
}

根据您的代码猜测您可能还需要 animation-iteration-count: infinite。

看看 @mixin motion-ui-animations 的实现（在 _classes.scss 中）。在那里您可以看到“即用型”CSS 类所需的各个部分。