Sliding a Div From the Left Using CSS Transition Not Working

HTML & CSS
1

I have a button on my page that when clicked is supposed to reveal a hidden div on the left side of the page and slide it to the right until it is fully inside of the page. I tried to do this by toggling the class using javascript as is shown on one of the articles I’ve seen online but it doesn’t work. Currently when I click on the button it reveals the div but it doesn’t slide it to the right. Please see my fiddle https://jsfiddle.net/Gapi555/d8b7m9g6/48/

2

The problem is in this line:-

.slide {display: none; left: -150px; transition: 2s;}

You go from display: none to display: block when adding the .active class, this isn’t an animatable transition, so you just get an abrupt change.
Make it display: block from the start, so it’s already visible, but off page. Then it can transition onto the page.

.slide {display: block; left: -150px; transition: 2s;}
.slide.active {left:0;}
1 Like
3

Thanks, that works great

4

OT:

@SamA74 is correct with the easy answer, but…

You can’t do it with a transition but you can do it with css animations

.slide {display:none; animation: slideback 2s;}
.slide.active { display:block; left:0; animation: slide 2s;}

@keyframes slide {
  from {
    opacity: 0;
    left: -150px;
  }
  to {
    opacity: 1;
    left: 0px;
  }
}
@keyframes slideback {
  from {
    display:block;
    opacity: 1;
    left: 0px;
  }
  to {
    display:none;
    opacity: 0;
    left: -150px;
  }
5

You can now using allow-discrete. :slight_smile:

6

sigh. Forgot about that since I find the @starting-style syntax clumsy.

(ironically, that specific video is why I remembered the ability to work with display:none)

1 Like
8

Hi SamA74, the CSS in this post are for sliding a div from the left side, will it also work for sliding a div from the right, top, or bottom if I modify certain things in the CSS above? For instance if I change the name of the class and change the property from “left” to “right”, “top”, or “bottom” and give it appropriate values and then change the name of the other class from “active” to some other name it should work correct? So far I tried sliding a div from the right after making the necessary changes but it did not work.

9

Show us the code you have tried as the code above is working. You can slide a div where you like but you probably have a conflict in your code or have not implemented it correctly.

Here’s an old demo that moves a box around using key frames.