在Javascript中將過渡應用於注入的html

Question

我已經和JS一起工作了大約兩個星期，我正在做一個小項目。 目標是在按下按鈕時能夠更改給定字符串中每個字符的顏色。 我已經走得那么遠了。

如您所見，我為每個角色添加了跨度，以便我可以單獨編輯它們。 我正在嘗試對跨度應用過渡，這樣當我單擊按鈕時，顏色會淡化為另一種顏色而不是瞬間變化。 那可能嗎？

這是codepen ：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="CSS/textColorV2.css">
</head>

<body>
<p id="letter">Color</p>
<button>Click ME</button>

<script type="text/javascript" src="JS/textColorV2.js"></script>

</body>
</html>

CSS

bodybody {
background-color: #FFE7E0;
}

span{
transition: all 4s;
}

#letter {
font-size: 9em;
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
color:blue;
}

JS

var letter = document.getElementById("letter");
var text = letter.innerHTML;
var button = document.querySelector("button");

button.addEventListener("click", function () {
  var newText = "";
  for (var i = 0; i < text.length; i++) {
    newText += '<span style="color:' + randomColor() + '">' + 
    text.charAt(i) + '</span>';
    letter.innerHTML = newText;
    letter.classList.add("trans");
    };
});

function randomColor() {
  //r
  var r = Math.floor(Math.random() * 256);
  //g
  var g = Math.floor(Math.random() * 256);
  //b
  var b = Math.floor(Math.random() * 256);
  return "rgb(" + r + " ," + g + " ," + b + ")";
}

Answer 1

這絕對是可能的。 這里的關鍵思想是在腳本開頭將字符串分隔為span元素（每個字符），而不是在每次單擊事件期間。

采用這種方法將簡化您的實現 - 您只需在按鈕單擊處理程序中為每個span元素分配一個新的“隨機顏色”，並將CSS轉換留給瀏覽器來處理：

 var letter = document.getElementById("letter"); var text = letter.innerHTML; var button = document.querySelector("button"); // Convert inner text node to span nodes for each character // at beginning of script var text = letter.innerText; letter.innerText = ''; for(var i = 0; i < text.length; i++) { var character = text[i]; letter.innerHTML += '<span style="color:' + randomColor() + '">' + character + '</span>'; } button.addEventListener("click", function () { // For each span/character of #letter, assign a new random // color. This causes the browser to handle the CSS color // transition for you for(var span of document.querySelectorAll('#letter span')) { span.style.color = randomColor(); } }); function randomColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return "rgb(" + r + " ," + g + " ," + b + ")"; }

 span{ transition: all 4s; } #letter { font-size: 9em; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); color:blue; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="CSS/textColorV2.css"> </head> <body> <p id="letter">Color</p> <button>Click ME</button> </body> </html>

Answer 2

這是一個更簡潔的版本......

 const letters = document.querySelectorAll('.letters'); const button = document.querySelector('button'); button.addEventListener('click', () => { letters.forEach(element => { element.style.transition = '1s'; element.style.color = randomColor(); }); }); const randomColor = () => { const r = Math.floor(Math.random() * 256); const g = Math.floor(Math.random() * 256); const b = Math.floor(Math.random() * 256); return `rgb(${r} ,${g},${b})`; };

 body { background-color: #ffe7e0; } #wrapper { font-size: 4em; position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%); color: blue; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="index.css"> <title>Document</title> </head> <body> <div id="wrapper"> <span class="letters">C</span> <span class="letters">o</span> <span class="letters">l</span> <span class="letters">o</span> <span class="letters">r</span> </div> <button>Click ME</button> <script src="index.js"></script> </body> </html>

在Javascript中將過渡應用於注入的html

問題描述

2 個解決方案

解決方案1
2 2018-11-07 03:07:15

解決方案2
1 2018-11-07 04:20:14

在Javascript中將過渡應用於注入的html

問題描述

2 個解決方案

解決方案1 2 2018-11-07 03:07:15

解決方案2 1 2018-11-07 04:20:14

解決方案1
2 2018-11-07 03:07:15

解決方案2
1 2018-11-07 04:20:14