动画后部分显示波段

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 {&nbsp; width: 300px;&nbsp; overflow: hidden;&nbsp; margin: 15px 5px 5px 50px;&nbsp; padding: 15px;&nbsp; border: solid 1px;&nbsp; transform:translate(0);}.band {&nbsp; position: absolute;&nbsp; line-height: 1.5;&nbsp; margin: -26px 0 0;&nbsp; padding: 0 5px;&nbsp; font-weight: bold;&nbsp; background-color: white;}<div class="container">&nbsp; <div class="band" data-display="n">Band Title</div>&nbsp; <div>&nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla.&nbsp;&nbsp; </div></div><button type="button" onclick="animateDiv()">Animate</button>获取更多详细信息的相关问题：CSS-Filter on parent break child position。您还将找到执行相同操作的所有属性的列表。您可以编辑代码以不同的方式执行此操作，而不会出现任何溢出，如下所示：function animateDiv() {&nbsp; let container = document.querySelector(".container");&nbsp; window.animatelo.fadeInLeft(container, {&nbsp; &nbsp; duration: 400&nbsp; });}.container {&nbsp; width: 300px;&nbsp; overflow: hidden;&nbsp; margin: 5px 5px 5px 50px;&nbsp; padding: 15px;&nbsp; border: solid 1px transparent;&nbsp; border-image:linear-gradient(to bottom, transparent 26px,#000 0) 1;&nbsp; background:linear-gradient(#000,#000) 0 25px/100% 1px no-repeat;}.band {&nbsp; line-height: 1.5;&nbsp; display:table;&nbsp; padding:0 5px;&nbsp; font-weight: bold;&nbsp; background-color: white;}<script src="//cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js"></script><div class="container">&nbsp; <div class="band" data-display="n">Band Title</div>&nbsp; <div>&nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla.&nbsp; </div></div><button type="button" onclick="animateDiv()">Animate</button>

Answer 2

一点 javascript 解决了我的问题，但还没有完全解决。在动画期间，乐队仍然是隐藏的。这不是更令人担心的情况。在动画之后，我只是克隆容器并用它自己替换它，它就可以工作了。请让我知道是否有人有比这更好的解决方案。谢谢，animation.onfinish&nbsp;=&nbsp;()&nbsp;=>&nbsp;container.replaceWith(container.cloneNode(true));function animateDiv() {&nbsp; let container = document.querySelector(".container");&nbsp; let animation = window.animatelo.fadeInLeft(container, {&nbsp; &nbsp; duration: 400&nbsp; })[0];&nbsp; animation.onfinish = () => container.replaceWith(container.cloneNode(true));}.container {&nbsp; width: 300px;&nbsp; overflow: hidden;&nbsp; margin: 15px 5px 5px 50px;&nbsp; padding: 15px;&nbsp; border: solid 1px;}.band {&nbsp; position: absolute;&nbsp; line-height: 1.5;&nbsp; margin: -26px 0 0;&nbsp; padding: 0 5px;&nbsp; font-weight: bold;&nbsp; background-color: white;}<script src="//cdn.rawgit.com/gibbok/animatelo/1.0.3/dist/animatelo.min.js"></script><div class="container">&nbsp; <div class="band" data-display="n">Band Title</div>&nbsp; <div>&nbsp; &nbsp; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin porttitor elit neque, in condimentum ante pulvinar et. Donec et erat nulla.&nbsp; </div></div><button type="button" onclick="animateDiv()">Animate</button>