CSS 전환이 실행되지 않음

Question

DOM 요소 (div)를 DOM에 추가 한 다음 자바 스크립트에서 폭을 모두 변경했습니다. 이것은 이론적으로 CSS3 전환을 트리거해야하지만 결과는 중간에서 전환없이 A에서 B까지 직선입니다.

별도의 테스트 클릭 이벤트를 통해 너비를 변경하면 모든 것이 예상대로 작동합니다.

은 여기 내 JS 및 CSS :

JS (jQuery를)

var div = $('<div />').addClass('trans').css('width', '20px'); 
$('#container').append(div); 
div.css('width', '200px'); 

CSS (분 단지 모질라) :

.trans { 
    -moz-transition-property: all; 
    -moz-transition-duration: 5s; 
    height: 20px; 
    background-color: cyan; 
} 

는 여기 엉망으로, 또는이다 건가요 일들이 완료되어야하는 방식이 아니라 "한 번의 빠른 결과"

모든 도움은 정말로 감사하겠습니다.

Answer 1

에서는 setTimeout에 의존하지 않는 청소기 접근 방식은, 그것을 설정하기 전에 문제의 CSS 속성을 읽는 것입니다

http://jsfiddle.net/FYPpt/144/

으로 아래의 의견에 설명 Lucero가이 방법을 사용하면 브라우저가 "자동", "상속"등이 아닌 실제 값을 계산하도록 강제해야합니다. 실제 값이 없으면 브라우저는 새 값을 이전 값과의 변경으로 알 수 없습니다.

Answer 2

여기에는 두 가지 방법이 있습니다.

1 - CSS는 transition 이벤트가

example jsfiddle

jQuery를 해고 할 수 있도록 위의 스크립트와 함께 대신 후 실행 setTimeoutaddClass 방법을 사용하여

을 전환 :

var div = $('<div class="trans" />'); 
$('#container').append(div); 
// set the class change to run 1ms after adding the div 
setTimeout(function() {div.addClass('wide')}, 1); 

CSS :

.trans { 
    width: 20px; 
    height: 20px; 
    background-color: cyan; 
    -webkit-transition: all 5s ease; 
     -moz-transition: all 5s ease; 
     -ie-transition: all 5s ease; 
     -o-transition: all 5s ease; 
      transition: all 5s ease; 
} 
.wide { 
    width: 200px; 
} 

2 - jQuery의 .animate() 기능

example jsfiddle

jQuery를 :

var div = $('<div class="trans" />'); 
$('#container').append(div); 
div.animate({'width': '200px'}, 5000); // 5 sec animation 

CSS :

.trans { 
    width: 20px; 
    height: 20px; 
    background-color: cyan; 
} 

,536

var div = $('<div />').addClass('trans'); 
$('#container').append(div); 
div.css('width');//add this line 
div.css('width', '200px'); 

여기 근무 :

Answer 3

jQuery의 .offset() 메서드를 호출 해보세요.

브라우저가 오프셋을 가져 오면 전환이 작동하도록하는 리플 로우/페인트 재/레이아웃 이벤트를 트리거합니다.

이 바이올린 참조 : http://jsfiddle.net/FYPpt/199/

는 또한 참조 - http://gent.ilcore.com/2011/03/how-not-to-trigger-layout-in-webkit.html

Answer 4

하는 @onetrickpony이 요구되면서를, 무엇을 모든 규칙이 CSS 파일에 있고 JS 기능에 추가 할 수 없습니다해야합니다.

규칙이 정의되어 별도의 클래스 추가 : 단지 약간의 변화 토린 Finnemann의 답변에 따라

, 당신의 CSS에 new-rules

var div = $('<div class="trans" />'); 
$('#container').append(div); 

var div = $('<div />').addClass('trans'); 
$('#container').append(div); 
div.height(); 
div.addClass('new-rules'); 

클래스는 미리 정의했다 :

.trans.new-rules { 
    width: 200px; 
    background: yellow; 
} 

이제 CSS를 변경할 때 JS에 따갈 필요가 없습니다. new-rules에서 CSS 파일에 변경 :

http://jsfiddle.net/FYPpt/201/

Answer 5

를 현상금 님의 질문에 답변

당신이 돈을 전환되고있는 재산 알 사치를하거나하지 않는 경우 setTimeout에 강제로 애니메이션을 적용하는 것이 좋은 습관이라고 생각하면 다른 방식으로 리플 로우를 강요 할 수 있습니다.

setTimeout이 처음 작동하는 이유는 그 기간 동안 0으로 설정되어 있어도 전체 문서 리플 로우가 발생했기 때문입니다. 리플 로우를 일으키는 유일한 방법은 아닙니다.

---

Link to a fiddle

이 JavaScript 우리 임의로 div 1~10 요소를 추가하고 임의로 그 중 하나를 선택하고 wide 클래스를 추가하는 JavaScript와

for (x = Math.ceil(Math.random() * 10), i=0;i<x;i++){ 
    $('<div />').appendTo($('#container')).addClass('trans'); 
} 

var divs = $('#container div'); 
var x = divs.eq(Math.ceil(Math.random() * divs.length)); 
x[0].offsetHeight; 
x.addClass('wide'); 

.

여기에는 이상한 JavaScript 줄 (예 : x[0].offsetHeight)이 있습니다. 이것은 전체 작업에 대한 lynchpin입니다. offsetHeight을 호출하면 setTimeout을 사용하거나 CSS 값을 쿼리하지 않고 문서를 리플 로우 할 수 있습니다.

리플 로우 페이지의 레이아웃을 계산 : 리플 로우는 DOM과 관련하여 무엇

. 요소의 리플 로우 은 요소의 치수와 위치를 다시 계산하며, 은 해당 요소의 하위 항목, 상위 항목 및 DOM에있는 요소 뒤에있는 요소에 대해 추가 리플 로우를 트리거합니다. 그런 다음 최종 페인트를 다시 호출합니다. 리플 로우는 매우 비쌉니다. 그러나 불행히도 이 쉽게 시작될 수 있습니다.

이러한 기능을 사용하는 방법에 대해 신중을 기하시기 바랍니다. 대부분의 최신 브라우저에 대한 우려는별로 없지만 (jQuery는 여러 리플 로우로 유명합니다), 웹 사이트 전체에이 솔루션과 같은 것을 추가하기 전에 고려해야 할 사항입니다.

---

중요 사항 :이 더 이상 이하 효율적setTimeout전화보다 없습니다. 이것은 마법의 총알 해결책이 아니며, 두포에서 똑같은 일을합니다.

---

여기에 해당 CSS 참조를 들어, :

.trans { 
    width: 20px; 
    height: 20px; 
    background-color: cyan; 
    -webkit-transition: all 5s ease; 
     -moz-transition: all 5s ease; 
     -o-transition: all 5s ease; 
      transition: all 5s ease; 
} 

.trans.wide { 
    width: 200px; 
} 

Answer 6

var div = $('<div />'); 

$('#container').append(div); 

div.css('width', '20px').addClass('trans', function() { 
    div.css('width', '200px') 
}); 

새로운 DIV 요소를 만들고 CSS 전환을 발사하기 위해 해당 요소에 '트랜스'클래스를 추가