Полоса отображения частично после анимации

Question

У меня есть контейнер с полосой в верхнем левом углу, и я добавил анимацию в контейнер, используя библиотеку animatelo . Все работает нормально, но после анимации группа частично скрывается. Я не знаю почему?

Контейнер переполнение установлен в скрытое.

ДО АНИМАЦИИ:

ПОСЛЕ АНИМАЦИИ

DEMO

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

Это потому, что ваша анимация будет учитывать преобразование и преобразование, создающее содержащий блок для абсолютного элемента.

Для элементов, макет которых определяется блочной моделью CSS, любое значение, кроме none, для свойство transform также заставляет элемент устанавливать sh содержащий блок для всех потомков. Его поле заполнения будет использоваться для компоновки всех его потомков абсолютной позиции, потомков фиксированной позиции и потомков фиксированных фоновых вложений. ^ref

Вот базовый c пример, чтобы увидеть проблему:

.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 -Фильтр при родительском разрыве дочернего позиционирования . Вы также найдете список всех свойств, которые делают то же самое.

---

Вы можете редактировать свой код, чтобы сделать это по-другому, без переполнения, как показано ниже:

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>