0

I have a container having a Band on top-left corner and I have added an animation to the container using animatelo library. Everything is working fine but after animation band get hidden partially. I don't know why?

The Container is overflow set to hidden.

BEFORE ANIMATION :

enter image description here

AFTER ANIMATION

enter image description here

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>
Mohammad Faisal
  • 2,144
  • 15
  • 26

2 Answers2

1

This is because your animation will consider transform and transform create a containing block for absolute element.

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments. ref

Here is a basic example to see the issue:

.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>

Related question to get more details: CSS-Filter on parent breaks child positioning. You will also find the list of all the properties that do the same.

You can edit your code to do this differently without having any overflow like below:

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>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 1
    " any value other than none for the transform property" ... As far as I have confirmed, `transform` property's value was computed to "none" after click an animation button on Firefox. Why does that rules applied in this case? Also, on Chrome, band is hidden until animation end. – sanriot Mar 09 '20 at 11:56
  • @sanriot I don't know what is done behind the scene using that plugin but I am fixing the issue in all the cases so that the label is no more hidden before, during and after the animation and it's clear that transform is the culprit is most of the cases – Temani Afif Mar 09 '20 at 14:11
  • I think so too that `transform` property is related this problem. I confirm devtool's console on your jsfiddle, however I got the value "none" in Firefox. – sanriot Mar 09 '20 at 14:18
0

A little javascript has solved my problem but not completely. During animation the band is still hidden. That's not a case of more worry. After Animation, I just clone the container and replace it with itself and it works. Plz let me know if anybody have a better solution than this. Thank you,

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>
Mohammad Faisal
  • 2,144
  • 15
  • 26