CSS高度过渡没有动画答案

【问题标题】：CSS Height Transition Not AnimatingCSS高度过渡没有动画
【发布时间】：2017-01-23 22:45:37
【问题描述】：

我有一个 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;
    }
}

【问题讨论】：

向我们展示div 元素。

标签： css animation less css-animations

【解决方案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>

【讨论】：

【解决方案2】：

在我刚刚制作的小提琴中运行良好。我想您的问题出在JS中。我的是

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

https://jsfiddle.net/swmfowgp/

【讨论】：

【解决方案3】：

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

【讨论】：