使用span使用javascript創建CSS轉換

使用javascript，我隨機從html div標籤中的文本中選擇一個詞，並用span標記將其包圍。使用span標籤的類我嘗試執行從黑色到紅色的單詞顏色的CSS轉換。然後我刪除span標籤以將單詞改回黑色。我期待的效果是「閃爍的詞語」。使用span使用javascript創建CSS轉換

我設法讓字改變顏色，但無法讓平滑的CSS轉換工作。

我的問題是：爲什麼不是CSS過渡工作？

我的問題似乎與this question類似，但我沒有設法得到「強制佈局」的解決方案在我的情況下工作。

我希望可以提供一個到test code I am working with的工作鏈接，而不是在這裏發佈代碼（javascript file here）。如果沒有，我當然會根據要求在這篇文章中添加代碼。

預先感謝您！我一整天都沒有成功，一直在反對這個問題。需要時間確認我需要幫助:-)

編輯：添加代碼。

HTML：

<div id="message"> 
Some words here. 
</div>

CSS：

div#message span 
{ 
    color: black; 
} 

div#message span.redtext 
{ 
    transition: color 5s ease-out 0s; 
    color: red; 
}

的Javascript：

//Insert span around word 
var newText = text.split(randomWord).join('<span>' + randomWord + '</span>'); 
$("#message").html(newText); 

//Request property that requires layout to force a layout 
var x = $("#message").clientHeight; 

//Add class to span 
var newText = newText.split('<span>').join('<span class="redtext">'); 
$("#message").html(newText);

來源

2012-08-26 Fredrik Rafn Strandberg

你爲什麼不轉換的每個字在div插入'DOMContentLoaded'跨度，然後就變隨機跨度的課程？此外，'$（「＃message」）。clientHeight'是'undefined'，你需要'$（「＃message」）[0] .clientHeight' –

是的，發佈你的代碼會很好，因爲1。關於SO的問題應該對未來的讀者有一定的意義，所以如果你的服務器出現故障或文件被修改，問題和答案在將來仍然有意義。和2.沒有發佈代碼（只有鏈接），它看起來像有人要求幫助解決在特定時間點的代碼中的問題（這可能會因爲本地化而關閉） - 但是我看到你已經盡力將它最小化爲一個可編輯的例子已經。所以是的，在提問時張貼一些相關的代碼。 '=]' –

謝謝你的回覆！您的兩點意義非凡，我將爲此問題添加代碼併爲將來的問題提供代碼。 –

CSS轉換申請的元素風格的變化。當新的CSS樣式應用於元素時，您可以指定要在該更改中使用的轉換。在您的示例中，您添加了使用紅色文本樣式創建的跨度。 span元素在創建時具有紅色文本樣式。您不是將某個元素從一種樣式轉換到另一種樣式，而只是使用redtext類樣式插入它。

您需要做的是在其中添加一個帶有黑色文本的跨度，然後將跨度類從「blacktext」更改爲「redtext」，並且將應用轉換。你可以在沒有課程的情況下插入它，然後改變它，但是我使用了類'blacktext'來更容易識別。

參見：

http://jsfiddle.net/n8zNW/

來源

2012-08-26 21:21:46

謝謝你的回答！我現在明白，最好創建一個黑色文本類的跨度，它也可以用來引用跨度。然而，我的問題是，就像在Gregs上面回答的那樣，我看不到jsfiddle中的任何顏色轉換，即使將持續時間設置爲10秒，該字也立即變爲紅色。測試Opera，Firefox和IE的最新版本。也許我錯過了一些非常基本的東西，我到目前爲止還沒有網絡開發專家。 –

我懂了！必須將強制佈局更正爲'$（「＃message」）[0] .clientHeight;'正如shhac所寫，並在創建帶有黑色文本的跨度後將其向下移動。非常感謝您的幫助！ –

給喲你跨班，這樣你就可以很容易地使用jquery獲得對它的引用。然後使用addClass和removeClass jquery方法來添加並隨後移除給文本賦予顏色的類。

這裏有一個工作示例：http://jsfiddle.net/sVMZJ/

來源

2012-08-26 20:49:01

謝謝你的回答！我一定會使用jquery的參考和方法。然而，我的問題是，我看不到你的jsfiddle中的任何顏色轉換，即使我將持續時間設置爲10秒，該字即刻變成紅色。我在這裏開始不信任我自己的眼睛。測試Opera，Firefox和IE的最新版本。 –

我懂了！必須將強制佈局更正爲'$（「＃message」）[0] .clientHeight;'正如shhac寫的，並且在類'highlightedWord'創建跨度之後將其向下移動。感謝您的幫助！我會接受Matts的答案，因爲它包含更多的解釋，儘管你的答案基本相同。 –

使用span使用javascript創建CSS轉換

回答

相關問題