首頁猿問 Javascript...

Javascript Animate Match CSS Animation

JavaScript

白板的微信 2022-08-04 10:08:52

我試圖讓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>

查看完整描述

3 回答

ibeautiful

TA貢獻1993條經驗獲得超6個贊

您的確切問題是，您在追加 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

);

反對回復 2022-08-04

炎炎設計

TA貢獻1808條經驗獲得超4個贊

在動畫調用之前移動。此外，從動畫中刪除。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;

}

反對回復 2022-08-04

鳳凰求蠱

TA貢獻1825條經驗獲得超4個贊

編輯：替換下面（注意方括號）

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>

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

}

反對回復 2022-08-04

3 回答
0 關注
135 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Javascript Animate Match CSS Animation

Javascript Animate Match CSS Animation

3 回答

添加回答