純粋なJavaScript（ライブラリなし）でHTML文字列メソッドを使用して作成した要素にCSS3アニメーションを追加

バニラJavaScriptを使用してフェードイン効果を作成しようとしています。 classNameプロパティの追加は、document.createElementメソッドを使用して作成された要素に対して機能しますが、var elem = "<li> List Item </li>"メソッドを使用しても機能していないようです。私はhtmlのIDリストを持つulを持っており、私はHTMLの文字列メソッドを使用してリスト項目を作成しています。 list.innerHTML = elemを使用してリスト項目をリストに追加し、リスト項目に「フェードイン」クラスを追加しようとしています。私はアニメーションを遅らせるためにsetTimeout関数を使用しましたが、それでも動作しません。以下のコードを参照してください。純粋なJavaScript（ライブラリなし）でHTML文字列メソッドを使用して作成した要素にCSS3アニメーションを追加

var list = document.getElementById("list"); 
 

 
var li = "<li> This is a list item</li>"; 
 
list.innerHTML = li; 
 
li.className = "fade-in"; 
 
// setTimeout(function(){ 
 
// li.className = "fade-in"; 
 
// },5);

#list { 
 
    opacity: 0; 
 
} 
 

 
.fade-in { 
 
    opacity: 1; 
 
    transition: opacity 0.5s; 
 
} 
 

 
li { 
 
    list-style-type: none; 
 
    font-size: 18px; 
 
    background-color: #84ac47; 
 
    color: #fff; 
 
    padding: 10px 5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 

 
<body> 
 
    <ul id="list"></ul> 
 
</body> 
 

 
</html>

出典

2017-06-05 knight

は、CSSアニメーション

@keyframes fadeIn { 
    from { 
     opacity: 0; 
    } 
    to { 
     opacity: 1; 
    } 
} 

.fade-in{ 
    animation: fadeIn .25s forwards; 
}

を使用し、<li class="fade-in">...</li>であるためにあなたのli文字列を変更します。こうすることで、innerHTMLを使用するときにクラス上にクラスが配置され、アニメーションが不透明度の変更を処理します。

更新説明：

だからあなたがinnerHTMLプロパティを使用してDOMにli要素を追加しています。その要素がDOMに追加されるとき、クラスはfade-inです。

@keyframes ruleを使用してCSSアニメーションを作成し、任意にアニメーションの名前をfadeInとします。 @keyframesのルール内では、エレメントに適用されたときにアニメーションを実行させたいものを指定します。我々はopacity: 0で始まり、opacity: 1に行きたいと言う。

.fade-inクラスのanimationプロパティを指定してアニメーションを使用します。私たちは、私たちは.25sでfadeInアニメーションを完成させ、それがとき、アニメーション、最終的なアニメーションのスタイルを維持することを意味しているforwardsへanimation-fill-modeプロパティを設定するために.fade-inを持つすべての要素をしたいと言っている.fade-inクラス上のアニメーションプロパティを設定することによって、私たちのアニメーションfadeInそうとも呼ば終わらせる。

出典

2017-06-05 02:13:59

ありがとうございました – knight

このコードでは何が起こっているのかご説明しますか？ – knight

確かに@knight。更新された回答を見る –

<!DOCTYPE html> 
<html> 
<body> 

<ul id="div1"> 
<li id="p1">This is a paragraph.</li> 
<li id="p2">This is another paragraph.</li> 
</ul> 
<style> 
#list>li { /*Set opacity on this list itmes, not the list*/ 
    opacity: 0; 
} 

#list .fade-in { /*Use a selector that is atleast as specific as the above.*/ 
    opacity: 1; 
    transition: opacity 0.5s; 
} 
li { 
    list-style-type: none; 
    font-size: 18px; 
    background-color: #84ac47; 
    color: #fff; 
    padding: 10px 5px; 
} 
</style> 
<script> 
window.onload = function(e){ 
var para = document.createElement("li"); 
var node = document.createTextNode("This is new."); 
para.appendChild(node); 
para.className = "fade-in"; 
var element = document.getElementById("div1"); 
element.appendChild(para); 
} 
</script> 

</body> 
</html>

私はそれを編集します。役に立ったと思っています

出典

2017-06-05 02:04:14

アイテムが作成されていて、この方法で要素を作成する際に問題はありません。アニメーションを追加する方法を理解できません。 – knight

あなたの平均は、window.onloadまたはclickでアニメーションを追加する方法です。 –

最初に、li.className=という文字列でDOM操作をしようとしています。 Thieリスト項目はまだDOM要素ではありません。内部HTMLを設定した後になります

ulには、子要素を上書きする不透明度0があります。

var list = document.getElementById("list"); 
 

 
var li = "<li class='fade-in'> This is a list item</li>"; 
 
//li.className = "fade-in"; -- Can't set className on a string 
 
list.innerHTML = li; 
 
console.log(list); 
 
// setTimeout(function(){ 
 
// li.className = "fade-in"; 
 
// },5);

#list>li { /*Set opacity on this list itmes, not the list*/ 
 
    opacity: 0; 
 
} 
 

 
#list .fade-in { /*Use a selector that is atleast as specific as the above.*/ 
 
    opacity: 1; 
 
    transition: opacity 0.5s; 
 
} 
 
li { 
 
    list-style-type: none; 
 
    font-size: 18px; 
 
    background-color: #84ac47; 
 
    color: #fff; 
 
    padding: 10px 5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <ul id="list"> 
 
    </ul> 
 
</body> 
 
</html>

オプション2

あなただけのDOM要素で作業したい場合は、次の操作を行うことができます。

var list = document.getElementById("list"); 
 

 
var li = document.createElement('li'); //Now we have a dom element 
 
li.innerHTML = "This is a list item"; 
 
list.appendChild(li); 
 
console.log(list); 
 
setTimeout(function(){ 
 
    li.className = "fade-in"; 
 
},5);

#list>li { /*Set opacity on this list itmes, not the list*/ 
 
    opacity: 0; 
 
} 
 

 
#list .fade-in { /*Use a selector that is atleast as specific as the above.*/ 
 
    opacity: 1; 
 
    transition: opacity 2s; 
 
} 
 
li { 
 
    list-style-type: none; 
 
    font-size: 18px; 
 
    background-color: #84ac47; 
 
    color: #fff; 
 
    padding: 10px 5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <ul id="list"> 
 
    </ul> 
 
</body> 
 
</html>

に注意してください、DOM操作は非常に文字列を注入すると、時々、より良いプラクティスであると考えられ、多くのリソースを使用することができます繰り返し。

出典

2017-06-05 02:11:22

私はli要素の不透明度を設定し、liをリストに追加した後にクラスを設定しようとしましたが、まだ動作しませんでした。あなたは自分で試すことができます。 – knight

変数 'li'はこの文脈では** never **のDOM要素です。それは文字列です。その文字列は、ULのDOM内の既存のHTMLを置き換えるために使用されます。私の解決策が機能しないと言っていますか？ –

文字列とDOMの使用の違いについては、https://jsfiddle.net/g9g6sxLe/1/を参照してください。 –

純粋なJavaScript（ライブラリなし）でHTML文字列メソッドを使用して作成した要素にCSS3アニメーションを追加

答えて

関連する問題