html - 延迟不可动画的 css 属性

Question

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

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

Answer 1

简短的回答，不是纯 html/css，长的回答，你可以复制这个

您可以使用诸如 max-height 属性之类的东西来复制这样的东西，尽管这又一次感觉很“hackish”，因为您将 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;
}

<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! I am only a set width. Hover me to see some magic!</div>

---

如果可能的话，另一种方法是使用一个简短的脚本来执行此操作。示例是使用 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>