延迟非动画CSS属性 [英] Delay non-animatable css properties

问题描述

我有一个动画会溢出身体，而动画前后的情况都不会(有必要).我可以在 body 上设置 overflow:hidden; (我将其设置为与视口一样高)，但是如果内容确实溢出了主体，我希望滚动条出现在动画的末尾.

I have an animation that overflows the body, while both the situations before and after the animation don't (necessarily). I could set overflow:hidden; on body (which I set to be as high as the viewport), but if the content actually does overflow the body, I want scrollbar to appear at the end of the animation.

我认为一种解决方案是将 transition:overflow 0s缓解0.5s ，以延迟overflow属性，以便动画过程中所有内容都被隐藏，并将其设置为 initial 或<代码>可见，因此滚动条仅在需要时显示.但是当然，这是行不通的，因为 overflow 不是可动画的属性.我的问题是；我可以延迟纯CSS的非动画属性吗?

I thought a solution would be setting transition:overflow 0s ease 0.5s, to delay the overflow property so everything would be hidden during the animation, and would be set to initial or visible after the animation ended, so the scrollbar only appears if needed. But of course, this doesn't work, since overflow is not an animatable property. My question is; can I delay non-animatable properties with pure css?

推荐答案

简短答案，不使用纯html/css ，长答案，您可以将其复制

Short answer, not with pure html/css, Long answer, you could sort of replicate this

您可以使用诸如max-height属性之类的内容来复制此类内容，尽管由于您将max-height设置为肯定适合所有文本的内容，这又会让人感到骇客".

You could use something like a max-height property to replicate something like this, although again this feels quite 'hackish' since you'd be setting the max-height to something that will definitely fit all text.

.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 方法或类似方法:

An alternative, if possible, would be to use a short script to do this. A sample would be to use setTimeout method or similar:

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

这篇关于延迟非动画CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！