Question

我有一个div agent-list，它通过Javascript设置了open和closed类。在Chrome和Firefox中，动画无效 - div会立即调整大小。我99％肯定此代码以前工作过，我认为它没有任何问题。

.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;
    }
}

Answer 1

请检查解决方案。

$(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>

Answer 2

我刚才制作的小提琴工作得很好。我想你的问题出在JS中。我的是

document.getElementById("MyElement").className = "agent-list closed";

https://jsfiddle.net/swmfowgp/

Answer 3

事实证明，CSS很好，React代码为big-O和.open创建了一个不同的div。当我修复它以使用相同的div并切换类时，它起作用了。

CSS高度转换不动画

3 个答案: