css - 如何将过渡应用于设置为显示 :none? 的元素

Question

我有一个 div，在 css 中:

    #move_me{
    display:none;
    width:100px;
    height:100px;
    background-color:#0F0;

    opacity:0;
    transition:opacity 1s linear;* 
    }

我也有一个按钮，在 JC 中分配了一个点击监听器:

$("#display_command").click(function(e) {
    console.log("asd");

    $("#move_me").css("display", "block");
    $("#move_me").css("opacity", 1);
});

它不会为 div 设置动画，只是显示它。如果我从 css 中删除 display:none 它会顺利地制作动画。那么我怎样才能使动画与 display:none 属性一起工作呢？

我必须将它设置为显示:无，因为我不希望它在单击按钮之前占用流中的任何空间。

Answer 1

DEMO

为了应用过渡，你必须像这样使用不透明度:

#animate_me{
   width:100px;
   height:100px;
   background-color:#0F0;
   opacity:0;    
   transition:opacity 1s linear;
}

#animate_me.opacityTransition{ 
   opacity:1; 
}

Js:

$("#display_command").click(function(e) {
   $("#animate_me").toggleClass("opacityTransition");
});

html:

<div id=animate_me>animate_me</div>
<button id=display_command>#display_command</button>

如果你想设置高度和不透明度的动画:

#animate_me{
   width:100px;
   height:0;
   background-color:#0F0;
   opacity:0;
   overflow:hidden;    
   transition:height 300ms linear, opacity 1s linear;
}

#animate_me.opacityTransition{ 
  opacity:1; 
  height:100px;
}

DEMO