CODEWITHSUNDEEP
javascripthtmlcssember-cli
Archer
Archer

Reputation: 1162

Remove the element completely after animation, each time. - only using CSS

How ever simple the query may seem, its boggling me since a couple of hours and here it is -

https://jsfiddle.net/230cLpnd/1/

In the jsFiddle above, i am trying to remove the element [ display:none; ] after the animation is complete. and reverse the same when it needs to be shown. But due to the use of display: none;, the transition is not applied too.

how can i completely remove the element each time the animation is complete.

https://jsfiddle.net/230cLpnd, here, Without the use of display none, the transition takes place, but the element is not completely hidden, even on width: 0%;

EDIT: adjusting height is not to be considered. It is being set by an external source.

EDIT 2: As in the second fiddle, the Animation is to slide right to hide the content and slide left while showing the content.

Thanks in advance!!

Upvotes: 2

Views: 463

Answers (1)

Shaggy
Shaggy

Reputation: 6796

Instead of setting display to be none, which, as you've discovered, isn't transitionable, you could set the height to be 0. By playing around with the various transition attributes, you can prevent the height from actually transitioning, achieving the effect you're after.

I've also added a transition on the opacity for you to make things look a bit smoother, but that's a matter of personal taste.

And, to save you the extra markup you had to clear your floated elements, I've included a "clearfix" pseudo-element on the container.

OPTION 1: Without transitioning height 

var  handles=document.querySelectorAll(".handle"),
     x=handles.length;
while(x--)
    handles[x].addEventListener("click",function(){
      this.parentNode.querySelector(".content").classList.toggle("hide");
    });
*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
.container{
  background:#ff0;
  border:1px solid #f00;
  margin:20px auto;
  width:90%;
}
.container::after{
  content:"";
  display:block;
  clear:both;
  height:0;
  width:0;
}
.content{
  background:#0f0;
  display: block;
  float:right;
  overflow:hidden;
  padding:20px 10px;
  transition-duration:0s,.5s,.5s,.5s;
  transition-property:max-height,padding,opacity,width;
  transition-timing-function:ease-in-out;
  white-space:nowrap;
  width:85%;
}
.content.hide{
  max-height:0;
  padding:0px;
  opacity:0;
  transition-delay:.5s,0s,0s,0s;
  width:0px;
 }
.handle{
  background:#aaa;
  float:right;
  height:100%;
  width:10%;
}
<div class="container">
  <div class="content hide">Content longer that the main<br>Content longer that the main<br>Content longer that the main<br>Content longer that the main<br></div>
  <div class="handle">click<br>to<br>toggle</div>
</div>
<div class="container">
  <div class="content hide">Content longer that the main<br>Content longer that the main<br>Content longer that the main<br>Content longer that the main<br></div>
  <div class="handle">click<br>to<br>toggle</div>
</div>
<div class="container">
  <div class="content hide">Content longer that the main<br>Content longer that the main<br>Content longer that the main<br>Content longer that the main<br></div>
  <div class="handle">click<br>to<br>toggle</div>
</div>

OPTION 2: Transitioning height with value set inline

var  handles=document.querySelectorAll(".handle"),
     x=handles.length;
while(x--)
    handles[x].addEventListener("click",function(){
      this.parentNode.querySelector(".content").classList.toggle("hide");
    });
*{box-sizing:border-box;font-family:sans-serif;margin:0;padding:0;}
.container{
  background:#ff0;
  border:1px solid #f00;
  margin:20px auto;
  width:90%;
}
.container::after{
  content:"";
  display:block;
  clear:both;
  height:0;
  width:0;
}
.content{
  background:#0f0;
  display: block;
  float:right;
  overflow:hidden;
  padding:20px 10px;
  transition-duration:.5s;
  transition-property:height,padding,opacity,width;
  transition-timing-function:ease-in-out;
  white-space:nowrap;
  width:85%;
}
.content.hide{
  height:0px!important;
  padding:0px;
  opacity:0;
  width:0px;
 }
.handle{
  background:#aaa;
  float:right;
  height:100%;
  width:10%;
}
<div class="container">
  <div class="content hide" style="height:125px;">Content longer that the main<br>Content longer that the main<br>Content longer that the main<br>Content longer that the main<br></div>
  <div class="handle">click<br>to<br>toggle</div>
</div>
<div class="container">
  <div class="content hide" style="height:150px;">Content longer that the main<br>Content longer that the main<br>Content longer that the main<br>Content longer that the main<br></div>
  <div class="handle">click<br>to<br>toggle</div>
</div>
<div class="container">
  <div class="content hide" style="height:175px;">Content longer that the main<br>Content longer that the main<br>Content longer that the main<br>Content longer that the main<br></div>
  <div class="handle">click<br>to<br>toggle</div>
</div>

Upvotes: 2

Related Questions