DEMO

Question

我有一个div，在css中：

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

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

我还有一个按钮，在JC中分配了一个clicklistener：

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

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

它没有为div设置动画，只是显示它。如果我从css中删除display：none，它会顺利地完成动画。那么如何使用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;
}

如何将转换应用于设置为display：none的元素？

1 个答案:

DEMO

DEMO