How to make a sliding motion using CSS in angular?

Question

Consider the following plunker

I am trying to make the list of number slide left upon enter and slide left upon leave.

Here is my css

.stuff {
  display: inline-block;
  margin-left: 10px;
}

button {
  display: block;
}

.stuff.ng-enter,
.stuff.ng-leave {
    -webkit-transition: all 1s ease-in-out;

}

.stuff.ng-enter {
    left: 100%;
}
.stuff.ng-enter-active {

    left: 0;
}

.stuff.ng-leave {
    left: 0;
}
.stuff.ng-leave-active {
    left: -100%;
}

I verified that if I change positioning transition to opacity it works, but for some reason giving the animation left or right doesn't work.

Can someone help me out?

Thanks

semuzaboi · Accepted Answer · 2016-11-02 12:48:35Z

1

Just had a look at your code, i'd recommend you add position to your styling. you can find the changes here

i just made a small change to the class.

.stuff.ng-enter,.stuff.ng-leave {

 -webkit-transition: all 1s ease-in-out;
 position:relative;

}

Hope this answers the question .

answered Nov 2, 2016 at 12:48

semuzaboi

5,2025 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to make a sliding motion using CSS in angular?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related