在JavaScript中触发CSS动画

Question

我不知道如何使用JQuery,所以我需要一个只能使用JavaScript触发动画的方法.当用户滚动页面时,我需要调用/触发CSS Animation.请帮我解决这个问题.

function start() {
  document.getElementById('logo').style.animation = "anim 2s 2s forward";
  document.getElementById('earthlogo').style.animation = "anim2 2s 2s forward";
}

* {
  margin: 0px;
}

#logo {
  position: fixed;
  top: 200px;
  height: 200px;
  width: 1000px;
  left: 5%;
  z-index: 4;
  opacity: 0.8;
}

#earthlogo {
  position: fixed;
  top: 200px;
  height: 120px;
  align-self: center;
  left: 5%;
  margin-left: 870px;
  margin-top: 60px;
  z-index: 4;
  opacity: 0.9;
}

@keyframes anim {
  50% {
    filter: blur(10px);
    transform: rotate(-15deg);
    box-shadow: 0px 0px 10px 3px;
  }
  100% {
    height: 100px;
    width: 500px;
    left: 10px;
    top: 10px;
    box-shadow: 0px 0px 15px 5px rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 1, 0.3);
    opacity: 0.7;
  }
}

@keyframes anim2 {
  50% {
    filter: blur(40px);
    transform: rotate(-15deg);
  }
  100% {
    height: 60px;
    width: 60px;
    left: 10px;
    top: 10px;
    margin-left: 435px;
    margin-top: 30px;
    opacity: 0.8;
  }
}

#backstar {
  position: fixed;
  width: 100%;
  z-index: 1;
}

#earth {
  position: absolute;
  width: 100%;
  z-index: 2;
  top: 300px;
}

Answer 1

添加和删​​除动画类在函数中不起作用。延迟实在是太小了。正如本文所建议的，您可以请求浏览器重排，然后添加该类。在这种情况下，延迟不是问题。因此，您可以使用以下代码：

element.classList.remove("animation")
element.offsetWidth
element.classList.add("animation")

最棒的是，这在任何地方都适用。所有功劳都归功于这篇文章。

Answer 2

更惯用的解决方案是使用Web Animations API。

这是来自MDN的示例：

document.getElementById("alice").animate(
  [
    { transform: 'rotate(0) translate3D(-50%, -50%, 0)', color: '#000' },
    { color: '#431236', offset: 0.3 },
    { transform: 'rotate(360deg) translate3D(-50%, -50%, 0)', color: '#000' }
  ], {
    duration: 3000,
    iterations: Infinity
  }
);

OP的例子：

document.getElementById('logo').animate(
    [
        {},
        {
            filter: 'blur(10px)',
            transform: 'rotate(-15deg)',
            box-shadow: '0px 0px 10px 3px',
        },
        {
            height: '100px',
            width: '500px',
            left: '10px',
            top: '10px',
            box-shadow: '0px 0px 15px 5px rgba(0, 0, 0, 0.7)',
            background-color: 'rgba(0, 0, 1, 0.3)',
            opacity: '0.7',
        },
    ],
    {
        duration: 2000,
        delay: 2000,
        fill: 'forwards',
    },
)

在撰写本文时，除 IE 之外的所有主要浏览器都支持它。 支持的浏览器

Answer 3

触发CSS动画的最简单方法是添加或删除一个类 - 如何使用纯Javascript执行此操作,您可以在此处阅读:

如何向给定元素添加类？

如果您使用jQuery(在基本用法中应该很容易学习),只需使用addClass/即可removeClass.

那么你所要做的就是设置一个到给定元素的过渡,如下所示:

.el {
    width:10px;
    transition: all 2s;
}

如果元素有一个类,则更改其状态:

.el.addedclass {
    width:20px;
}

注意:此示例处于转换状态.但对于动画来说,它是相同的:只需在具有类的元素上添加动画即可.

类似的问题:通过滚动触发CSS关键帧动画

Answer 4

这就是您如何使用普通 JavaScript 来更改/触发与 HTML 元素关联的动画。

首先，在 CSS 中定义动画。

@keyframes spin1 { 100% { transform:rotate(360deg); } }
@keyframes spin2 { 100% { transform:rotate(-360deg); } }
@keyframes idle { 100% {} }

然后你使用 javascript 在动画之间切换。

document.getElementByID('yourElement').style.animation="spin2 4s linear infinite";

注意：'yourElement' 是您希望设置动画的目标 HTML 元素。

例如： <div id="yourElement"> ... </div>

Answer 5

我有类似的问题。\n最好的答案\xe2\x80\x99对我不起作用，但是当我添加延迟时它起作用了。\n以下是我的解决方案。

\n

CSS

\n

.circle_ani1,\n.circle_ani2 {\n    animation-duration: 1s;\n    animation-iteration-count: 1;\n}\n\n.circle_ani1 {\n    animation-name: circle1;\n}\n\n.circle_ani2 {\n    animation-name: circle2;\n}\n

\n

JS

\n

let temp_circle1 = $('.TimeCountdown_circle1').removeClass('circle_ani1');\nlet temp_circle2 = $('.TimeCountdown_circle2').removeClass('circle_ani2');\nwindow.setTimeout(function() {\n    temp_circle1.addClass('circle_ani1');\n    temp_circle2.addClass('circle_ani2');\n}, 50);\n

\n

Answer 6

香草JS版本

document.getElementById('logo').classList.add("anim");
document.getElementById('earthlogo').classList.add("anim2");