CODEWITHSUNDEEP
javascripthtmlcssanimation
Ellisan
Ellisan

Reputation: 573

Transition on class removal not working

I am trying to get a container to come down when i click on an item in my menu. The animation downwards works fine. But the moment i click a different item in my menu, it doesnt animate upwards.

Css:

.card{
    width: 100%;
    background: blue;
    transform: translateY(-100px);
    opacity: 0;
    height:0;
    min-height: 0;
    transition-timing-function: cubic-bezier(.175,.885,.32,1.275);
    transition-property: opacity,transform;
    transition-duration: 1s;
}
.card-appeared{
    margin-top: 0;
    opacity: 1;
    transform: translateY(0);
    min-height: 300px;
    transition-delay: 1s;
    height:auto;
    width: 100%;
}

Html:

<div id="aboutme" class="container card ">
    About me
</div>
<div id="gallery" class="container card card-appeared">
    Gallery
</div>

Basic javascript for adding and removing classes

function appear(child){
    parent.classList.remove("card-appeared");
    let others = document.getElementsByClassName("card-appeared");
    for(var i = 0; i < others.length;i++){
        others[i].classList.remove("card-appeared");
    }
    child.classList.add("card-appeared");
}
function dissapear(child) {
    child.classList.remove("card-appeared");
    parent.classList.add("card-appeared");
}

others is the list of other cards in the page and the parent is the very first container.

If you need any other code, please let me know. I cannot seem to get the upwards animation working but the animation down does work.

Thank you.

Upvotes: 0

Views: 307

Answers (1)

UncaughtTypeError
UncaughtTypeError

Reputation: 8752

Since an explicit height is only specified when the class card-appeared is added, with the property min-height, the expected behaviour cannot be observed when this class is removed again, since the inherit state of the element in question has no explicit height defined. So it just "pops" back up.

To resolve this, consider the below:

.card {
  width: 100%;
  background: blue;
  transform: translateY(-600px); /* adjusted */
  opacity: 0;
  height: 0;
  min-height: 300px; /* added */
  transition-timing-function: cubic-bezier(.175, .885, .32, 1.275);
  transition-property: opacity, transform;
  transition-duration: 1s;
}

.card-appeared {
  margin-top: 0;
  opacity: 1;
  transform: translateY(-300px); /* adjusted */
  transition-delay: 1s;
  height: auto;
  width: 100%;
}

Breakdown: Since static positioning is being used here, elements with y-positioning offsets will still occupy space in the DOM. In order to account for this, the values of the transform: translateY() properties must be adjusted accordingly now that the elements in question always have a minimum height defined.

For Consideration: A better solution to this may be utilizing absolute positioning; this will remove the elements in question from the natural flow of the document, meaning you will not have to account for space occupied in the DOM by these elements, so transform: translateY() property values can remain intuitive.

Upvotes: 2

Related Questions