Переход не работает при смене с дисплея none на блок

Question

Я заметил, что transition не работает, когда элемент также изменяется с display на block. Почему это? Он работает, если я удаляю атрибут display.

CSS:

#box { 
    width: 150px; 
    height: 150px; 
    background: red; 
    transform: scale(0); 
    display: none; 
    transition: transform .5s; 
} 
    #box.active { 
     transform: scale(1); 
     display: block; 
    } 

http://jsfiddle.net/640kL55u/

Answer 1

Потому что она имеет display: none для начала, другие стили не принимаются в dom для перехода, как только добавляется display: block.

Вместо этого вы можете скрыть div с высотой, поэтому его все еще на странице, но не отображается. Затем добавьте высоту в div show.

JS Fiddle

Answer 2

Вы не можете перейти с display: none; свойствами ...

$("button").on("click", function() { 
 

 
    $("#box").addClass("active"); 
 

 
});

#box { 
 
    width: 0; 
 
    height: 0; 
 
    overflow: hidden; 
 
    background: red; 
 
    transform: scale(0); 
 
    transition: transform .5s; 
 
} 
 
#box.active { 
 
    width: 150px; 
 
    height: 150px; 
 
    transform: scale(1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<div id="box"></div> 
 
<button>CLICK</button>

Answer 3

Любое изменение от или к display: none не будет вызывать переходы.

Вы можете, однако, изменить свойство display, а затем добавить имя класса в конец стека javascript. Например:

function showElem(elem) { 
    elem.style.display = "block"; 

    setTimeout(function() { 
    elem.classList.add("active"); 
    }, 0); 
} 

И затем передать узлы элемента этой функции.