Javascript Animate Match CSS Animation

Question

我试图让Javascript动画与我的css动画完全匹配。我不确定为什么这不起作用？我正在尝试使用基本的javascript。不是jquery。第二个 div 应与第一个 div 的动画匹配https://jsfiddle.net/JokerMartini/pf2nt4su/let content = document.getElementById("content");html = `<div class="base"></div>`;let doc = new DOMParser().parseFromString(html, 'text/html');let div = doc.body.firstChild;// https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API// keyframesvar keyframes = [{  backgroundColor: 'green',  opacity: 0}, {  backgroundColor: 'blue',  opacity: 1}];// timing let timing = {  duration: 2000,  iterations: Infinity}div.animate([  keyframes,  timing]);//elements += html;content.append(div)body {  background: #808080;}.base {  width: 180px;  height: 90px;  background: black;}.sample {  animation: play 2s steps(10) infinite;}@keyframes play {  0% {    background-color: green;    opacity: 0;  }  100% {    background-color: blue;    opacity: 1;  }}<div class='base sample'></div><div id="content"></div>

Answer 1

您的确切问题是，您在追加 div 之前应用了动画，并将参数作为列表列表而不是对象列表（如您定义的那样）传递：keyframes

let content = document.getElementById("content");

html = `<div class="base"></div>`;

let doc = new DOMParser().parseFromString(html, 'text/html');

let div = doc.body.firstChild;

content.append(div)

// https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

// keyframes

var keyframes = [{

  backgroundColor: 'green',

  opacity: 0

}, {

  backgroundColor: 'blue',

  opacity: 1

}];

// timing 

let timing = {

  duration: 200,

  iterations: Infinity

}

div.animate(

  keyframes,

  timing

);

Answer 2

在动画调用之前移动 。此外，从动画中删除 。content.append(div)[]

我分叉了你的JSFiddle。这是一个工作版本。https://jsfiddle.net/jrgiant/c5z7x2bu/。

let content = document.getElementById("content");

html = `<div class="base"></div>`;

let doc = new DOMParser().parseFromString(html, 'text/html');

let div = doc.body.firstChild;

// https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

// keyframes

var keyframes = [{

  backgroundColor: 'green',

  opacity: 0

}, {

  backgroundColor: 'blue',

  opacity: 1

}];

// timing 

let timing = {

  duration: 2000,

  iterations: Infinity

}

content.append(div)

div.animate(

  keyframes,

  timing

);

//elements += html;

body {

  background: #808080;

}

.base {

  width: 180px;

  height: 90px;

  background: black;

}

.sample {

  animation: play 2s steps(10) infinite;

}

@keyframes play {

  0% {

    background-color: green;

    opacity: 0;

  }

  100% {

    background-color: blue;

    opacity: 1;

  }

}

<div class='base sample'></div>

<div id="content"></div>

Answer 3

编辑：替换下面（注意方括号）

div.animate([

  keyframes,

  timing

]);

跟：

document.getElementById("content").animate(

  keyframes,

  timing

);

这里的工作原理代码片段：（使用JS中的步骤更新）

<style>

body {

  background: #808080;

}

.base {

  width: 180px;

  height: 90px;

  background: black;

}

.sample {

  animation: play 2s steps(8) infinite;

}

@keyframes play {

  0% {

    background-color: green;

    opacity: 0;

  }

  100% {

    background-color: blue;

    opacity: 1;

  }

}

</style>

<div class='base sample'></div> <br>

<div id="content" class="base"></div>

<script>

let content = document.getElementById("content");

html = `<div class="base"></div>`;

let doc = new DOMParser().parseFromString(html, 'text/html');

let div = doc.body.firstChild;

// https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API

// keyframes

var keyframes = [{

 backgroundColor: 'green',

  opacity: 0 

}, {

 backgroundColor: 'blue',

  opacity: 1

}];

// timing 

var timing = {

  duration: 2000,

   easing: 'steps(8)',

  iterations: Infinity

}