How to create an animation from left to right or making a fade Angular 4

Question

I want when the component is open to make an animation or to make a fade.

This is the code

This is the HTML

<div *ngIf="showMePartially" class="container">
  <div class="body-container">
</div>
</div>

This is the CSS

.container {
    position: fixed;
    z-index: 1;
    padding-top: 100px;
    transition: opacity 0.5s ease-in;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
    transition: 3s;
}
.body-container {
  width: calc(100% - 73em);
  position: relative;
  left: 70em;
  top: 7.5em;
  background: white;
  height: calc(100% - 18em);
  border-radius: 4px;
  padding-left: 11px; 
  transition: opacity 0.5s ease-in;
  animation-direction: normal;
}

Possible duplicate of [Angular (4, 5, 6) - Simple example of slide in out animation on ngIf](https://stackoverflow.com/questions/47248898/angular-4-5-6-simple-example-of-slide-in-out-animation-on-ngif) — Nandita Sharma, Jul 19 '18 at 10:53
https://stackoverflow.com/questions/36417931/angular-2-ngif-and-css-transition-animation — Nandita Sharma, Jul 19 '18 at 10:55

Azamat Zorkanov · Accepted Answer · 2018-07-19T12:01:51.367

4

You can use css animation:

.body-container {
   /* above styles */
   animation: animation-name .3s ease-out forwards;
}

@keyframes animation-name {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

You can make your own animation inside of keyframes. This should work, because *ngIf will either remove element from dom, if condition is false, or append it into dom(this is when animation should work).

EDIT For left to right animation you can do like:

@keyframes animation-name {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}

edited Jul 19 '18 at 12:01

answered Jul 19 '18 at 11:20

Azamat Zorkanov

779
1
4
9

1

This is working man you saved me, but how can I do from right to left the animation ? – TheCoderGuy Jul 19 '18 at 11:54
Just change animation to : @keyframes animation-name { 0% { transform: translateX(100%); } 100% { transform: translateX(0%); } } – Azamat Zorkanov Jul 19 '18 at 11:59
I didnt understand ? – TheCoderGuy Jul 19 '18 at 12:00
Bro do you have any idea when I close the dialod to create also animation – TheCoderGuy Sep 17 '18 at 11:40

How to create an animation from left to right or making a fade Angular 4

1 Answers1

Linked