자바 스크립트에서 스팬을 사용하여 CSS 전환 만들기

Question

자바 스크립트를 사용하여 HTML div 태그의 텍스트에서 임의로 단어를 선택하고 span 태그로 묶습니다. span 태그의 클래스를 사용하여 color라는 단어가 검은 색에서 빨간색으로 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; 
} 

자바 스크립트 :

//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); 

Answer 1

CSS 전환 요소에 스타일 변화에 적용됩니다. 새로운 CSS 스타일이 요소에 적용되면 해당 변경에서 사용할 전환을 지정할 수 있습니다. 귀하의 예에서는 빨간색 텍스트 스타일로 작성된 범위를 추가했습니다. span 요소의 생성시 빨간색 텍스트 스타일이입니다. 한 스타일에서 다른 스타일로 요소를 전환하지 않고 단순히 redtext 클래스 스타일로 삽입하는 것입니다.

당신이해야 할 일은 검정색 텍스트가있는 스팬을 추가 한 다음 스팬의 클래스를 "blacktext"에서 "redtext"로 변경하면 전환이 적용됩니다. 클래스없이 삽입 한 다음 변경할 수는 있지만 'blacktext'클래스를 사용하여 쉽게 식별 할 수 있습니다.

참조 :

http://jsfiddle.net/n8zNW/

Answer 2

주고 요 UQuery 클래스를 사용하면 jquery를 사용하여 쉽게 참조 할 수 있습니다. 그런 다음 addClass 및 removeClass jquery 메서드를 사용하여 텍스트에 색상을 지정하는 클래스를 추가하고 제거합니다.

여기에 동작하는 예제입니다 : http://jsfiddle.net/sVMZJ/