Can anyone explain me why my transition isnt working

by 
.cart-panel{
position:absolute;
top:0;
left:0;
width:100vw;
height:100vh;
z-index:2;
display:flex;
visibility:hidden;
transform:translateX(100%);
transition:transform 0.3s ease-in;
}
.cart-panel.active{
visibility:visible;
transform:translateX(0);
}

Can anyone explain me why my transition works when i add active class but vice versa dosent.And why it starts working when i replace transition to all

Changing the transition to “all” includes the visibility property in the transition, which is why it starts working as expected when you use transition: all 0.3s ease-in;. If you want to transition only specific properties, you can list them explicitly to achieve the same effect.

For Example:
transition: transform 0.3s ease-in, visibility 0.3s ease-in;

Hope this helps solve a part of your problem!

Leave a Comment