在 JavaScript 中触发 CSS 动画

Posted

技术标签:

【中文标题】在 JavaScript 中触发 CSS 动画【英文标题】：Trigger CSS Animations in JavaScript 【发布时间】：2017-12-04 10:08:59 【问题描述】：

我不知道如何使用 JQuery，所以我需要一个可以仅使用 javascript 触发动画的方法。

当用户滚动页面时，我需要调用/触发 CSS 动画。

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;

<img src="logo.png" id="logo" onclick="start();">
<img src="earthlogo.gif" id="earthlogo" onscroll="start();">
<img src="earth.png" id="earth">
<img src="stars.jpg" id="backstar">

【问题讨论】：

onscroll 在图片上毫无意义。 搜索jquery如何拦截页面的滚动，以及如何添加类。非常基本的问题伙伴做一些研究。 【参考方案1】：

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

How do I add a class to a given element?

如果您确实使用 jQuery（在基本用法中应该很容易学习），您只需使用 addClass / removeClass 即可。

你所要做的就是设置一个到给定元素的转换，如下所示：

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

如果元素有类则改变其状态：

.el.addedclass 
    width:20px;

注意：这个例子是有过渡的。但对于动画来说也是一样的：只需在有类的元素上添加动画即可。

这里有一个类似的问题：Trigger a CSS keyframe animation via scroll

【讨论】：

el.classList.add('myClass') 或 classList.remove() 已替换 addClass / removeClass 见developer.mozilla.org/en-US/docs/Web/API/Element/classList【参考方案2】：

这是您可以使用原生 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 元素 ID。

例如：&lt;div id="yourElement"&gt; ... &lt;/div&gt; 或 &lt;table id='yourElement'&gt;...&lt;/table&gt;

【讨论】：

【参考方案3】：

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

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

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

【讨论】：

【参考方案4】：

原生 JS 版本

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

【讨论】：

这可能是一个正确的答案，但一些关于不同之处或解决方案解释的详细信息将为 OP 以及未来的 SO 用户提供服务，以寻找能够教会他们一些东西的答案。跨度> 【参考方案5】：

您可以使用 CSS 隐藏图像/动画并在用户滚动时显示。这将像这样工作：

CSS：

div 
    border: 1px solid black;
    width: 200px;
    height: 100px;
    overflow: scroll;


#demo
    display: none;

HTML：

<div id="myDIV"> </div>

<div id="demo">
     <img src="earthlogo.gif" id="earthlogo" >
</div>

您的 javascript 只需要包含一个 eventListener 来调用触发动画显示的函数。

JS：

document.getElementById("myDIV").addEventListener("scroll", start);

function start() 
    document.getElementById('demo').style.display='block';

【讨论】：

我几乎每次都使用这个技巧【参考方案6】：

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

CSS

.circle_ani1,
.circle_ani2 
    animation-duration: 1s;
    animation-iteration-count: 1;


.circle_ani1 
    animation-name: circle1;


.circle_ani2 
    animation-name: circle2;

JS

let temp_circle1 = $('.TimeCountdown_circle1').removeClass('circle_ani1');
let temp_circle2 = $('.TimeCountdown_circle2').removeClass('circle_ani2');
window.setTimeout(function() 
    temp_circle1.addClass('circle_ani1');
    temp_circle2.addClass('circle_ani2');
, 50);

【讨论】：

【参考方案7】：

主要代码如下：

HTML：

<img id="myImg">

CSS：

#myImg 
    //properties
    animation: animate 2s linear infinite //infinite is important!

@keyframes animate 
    //animation base

JS：

document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
window.addEventListener("scroll", function() 
    document.getElementById("myImg").style.webkitAnimationPlayState = "running";
    setTimeout(function() 
        document.getElementById("myImg").style.webkitAnimationPlayState = "paused";
    , 2000);
);

【讨论】：

【参考方案8】：

如果你想要动画，我建议你创建一个 CSS 类，你可以在 JS 条件下切换： CSS

.animation 
 animation: anim 2s ease infinite;
 transition: .2s

JS

// Select your Element

$element.document.querySelector(".yourElement");
$element.addEventListner('click', () => 
 $element.classList.toggle("animation")
)

【讨论】：

【参考方案9】：

更惯用的解决方案是使用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 外，所有主流浏览器都支持它。 Supported browsers

【讨论】：

以上是关于在 JavaScript 中触发 CSS 动画的主要内容，如果未能解决你的问题，请参考以下文章

如何通过JavaScript重新触发WebKit CSS动画？

使用 JavaScript 触发 CSS 转换 [重复]

在页面加载动画上制作 css 的正确方法是啥？ [复制]

您可以使用 JavaScript 将 CSS 关键帧动画“强制”到其最终状态吗？

如何在样式组件中触发 CSS 动画？

如何触发css3过渡动画