CODEWITHSUNDEEP
csscss-animations
Dblakenz
Dblakenz

Reputation: 41

CSS animations, slide in on 'block' and out on 'none'

I'm building something that is using the css slide animation to have some text slide in when the text display is set to "block", but I was wondering how I would go about doing the reverse (sliding it out) when it is set to "none"? Is it possible to slide in and slide out with CSS animations, or would I have to use Javascript?

Hope that makes sense! Let me know if you have any questions!

JSfiddle of give you a better idea https://jsfiddle.net/qjwqL236/

Thanks!

And code below:

document.getElementById("in-button").onclick = function(){
	document.getElementById("text-container").style.display = "block";
}

document.getElementById("out-button").onclick = function(){
	document.getElementById("text-container").style.display = "none";
}
#text-container{
  height: 30px;
  width:300px;
  color: white;
  background-color: blue;
  float:left;
  display:none;
  
  position: relative;
  left: -300px;
  animation: slide 0.5sforwards;
  -webkit-animation: slide 0.5s forwards;
}

@-webkit-keyframes slide {
  100% {
    left: 0;
  }
}
@keyframes slide {
  100% {
    left: 0;
  }
}

#in-button{
  float:left;
 }
 
#out-button{
  float:left;
 }
<button id="in-button">
Make Div slide in
</button>

<button id="out-button">
Make Div slide out?
</button>

<br>
<br>

<div id="text-container">
  This is some text in a div.
</div>

Upvotes: 1

Views: 8642

Answers (3)

hdotluna
hdotluna

Reputation: 5732

In your case. It's easier to use transition than animation. This is how it works.

Everytime the button is click. It changes the value of the left property. 

<button id="in-button">
Make Div slide in
</button>

<button id="out-button">
Make Div slide out?
</button>

<br>
<br>

<div id="text-container">
  This is some text in a div.
</div>

CSS

#text-container{
  height: 30px;
  width:300px;
  color: white;
  background-color: blue;
  float:left;
  position: relative;
  left: -400px;
  transition: all 0.3s linear
}

#in-button, #out-button{
  float:left;
}

JS

var tC = document.getElementById('text-container');

document.getElementById("in-button").onclick = function(){
    tC.style.left = '0';
}

document.getElementById("out-button").onclick = function(){
    tC.style.left = '-400px';
}

Working fiddle: https://jsfiddle.net/qjwqL236/1/

Upvotes: 2

kukkuz
kukkuz

Reputation: 42352

Here is what you can do using animations. You need to create a slide-out animation just like you have a slide-in.

Note that it won't slide in/out automatically when you change the display to none or block.

document.getElementById("in-button").onclick = function() {
  document.getElementById("text-container").setAttribute('class', 'slide-in');
}

document.getElementById("out-button").onclick = function() {
  document.getElementById("text-container").setAttribute('class', 'slide-out');
}
#text-container {
  height: 30px;
  width: 300px;
  color: white;
  background-color: blue;
  float: left;
  position: relative;
  left: -300px;
}
.slide-in {
  animation: slide-in 0.5s forwards;
  -webkit-animation: slide-in 0.5s forwards;
}
.slide-out {
  animation: slide-out 0.5s forwards;
  -webkit-animation: slide-out 0.5s forwards;
}
@-webkit-keyframes slide-in {
  100% {
    left: 0;
  }
}
@keyframes slide-in {
  100% {
    left: 0;
  }
}
@-webkit-keyframes slide-out {
  0% {
    left: 0;
  }
  100% {
    left: -300px;
  }
}
@keyframes slide-out {
  0% {
    left: 0;
  }
  100% {
    left: -300px;
  }
}
#in-button {
  float: left;
}
#out-button {
  float: left;
}
<button id="in-button">
  Make Div slide in
</button>

<button id="out-button">
  Make Div slide out?
</button>

<br>
<br>

<div id="text-container">
  This is some text in a div.
</div>

Upvotes: 0

brian treese
brian treese

Reputation: 341

You should use css translate because it's more performant than positioning and then you need an animation in and an animation out that you can trigger with a class change instead of the display property.

document.getElementById("in-button").onclick = function(){
	document.getElementById("text-container").className = "in";
}

document.getElementById("out-button").onclick = function(){
	document.getElementById("text-container").className = "out";
}
#text-container{
  height: 30px;
  width: 300px;
  color: white;
  background-color: blue;
  transform: translateX(-310px);
}

#text-container.in {
  animation: in 0.5s both;
  -webkit-animation: in 0.5s both;
}

#text-container.out {
  animation: out 0.5s both;
  -webkit-animation: out 0.5s both;
}

@-webkit-keyframes in {
  100% {
    transform: translateX(0);
  }
}
@keyframes in {
  100% {
    transform: translateX(0);
  }
}

@-webkit-keyframes out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-310px);
  }
}
@keyframes out {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-310px);
  }
}

#in-button{
  float:left;
 }
 
#out-button{
  float:left;
 }
<button id="in-button">
Make Div slide in
</button>

<button id="out-button">
Make Div slide out?
</button>

<br>
<br>

<div id="text-container">
  This is some text in a div.
</div>

Upvotes: 2

Related Questions