CODEWITHSUNDEEP
javascriptcssangularjsanimation
Michael
Michael

Reputation: 16142

Slide down animation by changing classes

I have created a simple toast system. I have a non visible (bottom: -50px; position: fixed;) block:

<div class="toast" ng-class="$root.peekToast.class" ng-bind="$root.peekToast.msg"></div>

Then I add a toast-show (with animation) class using ng-class when toast is needed:

.ew-toast-show {
  -webkit-animation: ew-toast-show 0.5s forwards;
  -webkit-animation-delay: 0.5s;
  animation: ew-toast-show 0.5s forwards;
  animation-delay: 500ms;
}

@-webkit-keyframes ew-toast-show {
  100% { bottom: 20px; }
}

@keyframes ew-toast-show {
  100% { bottom: 20px; }
}

However, when the toast is ready to be closed, I want to have a class toast-hide that slides-down the toast when it replaces the toast-show class.

I have tried to duplicate the show animation logic by just using -50px instead of 20px. It didn't quite work. It hid and showed the block before sliding it down.

What is the right way to do it?

Upvotes: 0

Views: 2110

Answers (1)

Frank Tan
Frank Tan

Reputation: 4412

If you're willing to change your code a bit, and you can support it, I think using transform and transition will be easier than @keyframes.

$('#b').click(() => $('.toast').toggleClass('ew-toast-show'));
.toast {
  position: fixed;
  bottom: -50px;
  transition: transform 0.5s;
}

.ew-toast-show {
  transform: translateY(-70px);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toast">Toast</div>
<button id="b">Toggle</button>

I added jQuery for convenience. The key is setting transition on .toast. In this example, we're saying that we want to animate the transform property and have it last for 0.5 seconds. Then, the class for when you show the toast uses transform to indicate the final position. CSS will take care of animating.

Upvotes: 2

Related Questions