隱藏狀態下的塊內動畫

如果塊內容處於狀態「無」，動畫是否工作？隱藏狀態下的塊內動畫

例如，如果我想使用Load with JQuery，並且我希望動畫在頁面加載後啓動，這是否會工作？

.container { 
display : none; 
} 
.container .animate { 
transform : translate(0,-100px); 
    transition : 1s transform ; 
} 
.show { 
display : block ; 

}

jQuery中

$(function() { 
      $(".container").addClass("show"); 
     });

如果有另一種方式，請幫助我。

來源

2015-04-28 Soufiane

轉換將發生在頁面加載而不是addclass事件 – madalinivascu

如果我想知道這一點，我會在小提琴或codepen中構建一個快速測試。 –

@JeremyThille我有很多測試我問，如果它是專業和一個很好的方式來做到這一點，謝謝 – Soufiane

看起來像display:none元素可以是動畫...

這是一個測試：該文本是隱藏的，轉換到右側，然後顯示出來：它作品。

$("p").addClass("shift"); 
 

 
setTimeout(function(){ 
 
    $("p").css("display","block"); 
 
}, 1000)

p{ 
 
    display:none; 
 
    border:green solid 1px; 
 
    width:150px; 
 
    -webkit-transition: all 1s ease-in-out; 
 
    -moz-transition: all 1s ease-in-out; 
 
    -o-transition: all 1s ease-in-out; 
 
    transition: all 1s ease-in-out; 
 
} 
 

 
p.shift{ 
 
    transform : translate(300px,0); 
 
    -webkit-transform: translate(300px,0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>some text</p>

這是你想要的嗎？

來源

2015-04-28 11:58:59

-1

剛剛嘗試改變ATTR

$(function() { 
    $(".container").attr("display","block !important"); 
});

來源

2015-04-28 11:35:53

隱藏狀態下的塊內動畫

回答

相關問題