动画后部分显示波段

Question

我有一个在左上角有一个 Band 的容器，我使用animatelo库向容器添加了一个动画。一切正常，但动画乐队部分隐藏后。我不知道为什么？容器溢出设置为隐藏。动画前：动画后演示function animateDiv() {  let container = document.querySelector(".container");  window.animatelo.fadeInLeft(container, {    duration: 400  });}.container {  width: 300px;  overflow: hidden;  margin: 15px 5px 5px 50px;  padding: 15px;  border: solid 1px;}.band {  position: absolute;  line-height: 1.5;  margin: -26px 0 0;  padding: 0 5px;  font-weight: bold;  background-color: white;}<script src="//cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js"></script><div class="container">  <div class="band" data-display="n">Band Title</div>  <div>    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla.   </div></div><button type="button" onclick="animateDiv()">Animate</button>

Answer 1

这是因为您的动画会考虑 transform 和 transform 为绝对元素创建一个包含块。

对于布局由 CSS 框模型控制的元素，transform 属性的任何值（除了 none 之外）也会导致元素为所有后代建立一个包含块。它的填充框将用于为其所有绝对位置后代、固定位置后代和后代固定背景附件进行布局。^参考

这是查看问题的基本示例：

.container {

  width: 300px;

  overflow: hidden;

  margin: 15px 5px 5px 50px;

  padding: 15px;

  border: solid 1px;

  transform:translate(0);

}

.band {

  position: absolute;

  line-height: 1.5;

  margin: -26px 0 0;

  padding: 0 5px;

  font-weight: bold;

  background-color: white;

}

<div class="container">

  <div class="band" data-display="n">Band Title</div>

  <div>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla. 

  </div>

</div>

<button type="button" onclick="animateDiv()">Animate</button>

获取更多详细信息的相关问题：CSS-Filter on parent break child position。您还将找到执行相同操作的所有属性的列表。

您可以编辑代码以不同的方式执行此操作，而不会出现任何溢出，如下所示：

function animateDiv() {

  let container = document.querySelector(".container");

  window.animatelo.fadeInLeft(container, {

    duration: 400

  });

}

.container {

  width: 300px;

  overflow: hidden;

  margin: 5px 5px 5px 50px;

  padding: 15px;

  border: solid 1px transparent;

  border-image:linear-gradient(to bottom, transparent 26px,#000 0) 1;

  background:linear-gradient(#000,#000) 0 25px/100% 1px no-repeat;

}

.band {

  line-height: 1.5;

  display:table;

  padding:0 5px;

  font-weight: bold;

  background-color: white;

}

<script src="//cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js"></script>

<div class="container">

  <div class="band" data-display="n">Band Title</div>

  <div>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla.

  </div>

</div>

<button type="button" onclick="animateDiv()">Animate</button>

Answer 2

一点 javascript 解决了我的问题，但还没有完全解决。在动画期间，乐队仍然是隐藏的。这不是更令人担心的情况。在动画之后，我只是克隆容器并用它自己替换它，它就可以工作了。请让我知道是否有人有比这更好的解决方案。谢谢，

animation.onfinish = () => container.replaceWith(container.cloneNode(true));

function animateDiv() {

  let container = document.querySelector(".container");

  let animation = window.animatelo.fadeInLeft(container, {

    duration: 400

  })[0];

  animation.onfinish = () => container.replaceWith(container.cloneNode(true));

}

.container {

  width: 300px;

  overflow: hidden;

  margin: 15px 5px 5px 50px;

  padding: 15px;

  border: solid 1px;

}

.band {

  position: absolute;

  line-height: 1.5;

  margin: -26px 0 0;

  padding: 0 5px;

  font-weight: bold;

  background-color: white;

}

<script src="//cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js"></script>

<div class="container">

  <div class="band" data-display="n">Band Title</div>

  <div>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla.

  </div>

</div>

<button type="button" onclick="animateDiv()">Animate</button>