我有一個div，agent-list其中有open和closed通過Javascript設置它。在Chrome和Firefox中，動畫無效 - div立即調整大小。我99％肯定此代碼以前工作，我沒有看到任何錯誤。CSS高度轉換不動畫
.agent-list {
position: absolute;
z-index: 20;
bottom: 0;
background-color: $lightGrey;
transition: all 1.15s;
transition-timing-function: ease-in;
&.closed {
height: 48px;
}
&.open {
height: 400px;
overflow-y: auto;
}
}
事實證明，在CSS是罰款，並做出反應的代碼是創建一個不同的股利爲.open和.close。當我修復它使用相同的div和切換類，它的工作。
它在我剛做的小提琴中工作正常。我想你的問題在JS中。 煤礦是
document.getElementById("MyElement").className = "agent-list closed";
請檢查解決方案。
$(function(){
$('button').on('click', function(e){
e.preventDefault();
$('.agent-list').toggleClass('open');
});
});body{
position: relative;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.agent-list {
position: absolute;
z-index: 20;
top: 50px;
background-color: #565656;
transition: height 0.3s ease-in-out 0s;
height: 48px;
left: 0;
overflow: hidden;
width: 100%;
color: #ffffff;
}
.agent-list.open {
height: 400px;
overflow-y: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button type="button">Click ME</button>
<div class="agent-list">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
向我們展示'div'元素。 –