延迟不可动画的 css 属性答案

【问题标题】：Delay non-animatable css properties延迟不可动画的 css 属性
【发布时间】：2017-12-03 18:48:57
【问题描述】：

我有一个溢出身体的动画，而动画前后的情况都没有（必然）。我可以在body 上设置overflow:hidden;（我设置为与视口一样高），但如果内容确实溢出了主体，我希望滚动条出现在动画的末尾。

我认为一个解决方案是设置transition:overflow 0s ease 0.5s，以延迟溢出属性，以便在动画期间隐藏所有内容，并在动画结束后设置为initial 或visible，因此只出现滚动条如果需要的话。但当然，这不起作用，因为overflow 不是动画属性。我的问题是；我可以用纯 css 延迟非动画属性吗？

【问题讨论】：

基本上......你不能。如果它不是可动画的，那就是它。

标签： html css

【解决方案1】：

简答，不是纯 html/css，长回答，你可以复制一下

您可以使用类似 max-height 属性的东西来复制类似的东西，尽管这又感觉很“骇人听闻”，因为您将 max-height 设置为绝对适合所有文本的东西。

.test {
  max-height: 50px;
  width: 150px;
  background: tomato;
  overflow: hidden;
  transition: all 0.8s, max-height 3s 5s;
}
.test:hover {
  background: blue;
  max-height: 500px;
}

&lt;div class="test"&gt;I am only a set width. Hover me to see some magic! I am only a set width. Hover me to see some magic! I am only a set width. Hover me to see some magic!&lt;/div&gt;

如果可能，另一种方法是使用简短的脚本来执行此操作。一个示例是使用setTimeout 方法或类似方法：

$(document).ready(function() {
  $('.test').hover(function() {
    setTimeout(function() {
      $('.test').addClass("hovered");
    }, 3000);

  });
});

.test {
  height: 50px;
  width: 150px;
  background: tomato;
  overflow: hidden;
  transition: all 0.8s;
}
.test:hover {
  background: blue;
}
.hovered {
  overflow: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">I am only a set width. Hover me to see some magic! I am only a set width. Hover me to see some magic!</div>

【讨论】：

【解决方案2】：

好吧，没有合适的方法，但是将默认不透明度设置为 0，将悬停不透明度设置为 1 并进行过渡可以达到预期的效果。

【讨论】：

【解决方案3】：

我有类似的问题：

.test {
 transition: all 1s ease;
 overflow:hidden;
 max-height: 0;
}
.test.withAnimation {
 max-height: 300px;
}
.test.withAnimation:after {
 overflow:inherit;
}

【讨论】：