How to set scale fade in fade out in the reverse direction?

Question

Greeting . I already have the fade in animation. When my dialog or box opens the animation is good. However, the problem is that this does not happen when the animation is turned off at the click of the X button. I want what happens now on fade in, happens on fade out too. In short when my dialog box pops up, animation pops up good But I want to exit the dialog so that the animation is also scale down. Code:

html

  <div class="modal-dialog">
       any content
       // button which close animation
    <button type="button" class="close" (click)="closeDialog()">
       x
   </button>
 </div>

css

.modal.fade .modal-dialog {
  animation-name: fade-in-scale-animation;
  animation-duration: 0.3s;
}

@keyframes fade-in-scale-animation {
  0%   {transform: scale(0.5); opacity : 0 }
  100% {transform: scale(1); opacity : 1}
}

EDIT:

Check this https://stackblitz.com/edit/angular-66n3nl I want on close animation same as when a open?

I offer u to use https://daneden.github.io/animate.css/ animated css. It is very easy to use just add classname class="animated fadeIn" — mr. pc_coder, Apr 06 '20 at 17:05
@Çağrı Good thnaks but i need use this code above? How to append fade out scale ? — Aleksnadar, Apr 06 '20 at 17:06
You may have luck with this question https://stackoverflow.com/questions/42610974/ng-bootstrap-modal-animation Bootstrap normally has a close transition but that behavior may have changed with the Angular integration. — JP., Apr 06 '20 at 17:12

VRoxa · Answer 1 · 2020-04-06T18:30:05.153

You may apply a second class which has the animation, but dynamically.

const fadeInOutContainer = document.querySelector('#modal');

const fadeOut = () => {

  fadeInOutContainer.classList.add('fade-out-container');
}

.fade-in-container {
  background: black;
  width: 200px;
  height: 200px;
  
  animation: fade-in 0.3s;
}

.fade-out-container {
  animation: fade-out 0.3s;
}

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

<div class="fade-in-container" id="modal">

   <!-- Content here... -->

</div>

<button onclick="fadeOut()">Fade out</button>

This is just a sample for the sake of example. The idea is there, adding a new class to the container itself.

I suppose the modal will not be displayed once the animation ends, that's why I leave this with the class on it. If this is not the case and the HTML element will be recycled for some reason, you should remove the dynamic class later.

Edit on demand If you define an HTML Element with a class, the styles whitin that class will be applied by the time the element is just rendered.

*.html

<div class="test">Just for the sake of example</div>

*.css

.test { border: 1px solid red; }

Here, the container above will have a red border by the time the page loads (or the container displays).
Talking about animations, if we have

.test {
   border: 1px solid red;
   animation: anim 1s;
}

@keyframes anim {
   0% { opacity: 0 }
   100% { opacity: 1 }
}

The animation anim will be triggered at the same time the styles whitin the test class are being applied.
That is why you can't apply fade-in-container and fade-out-container to the container in your HTML file.

What you want is to trigger the fade-in animation first (whenever the container is rendered), and that is why the container is defined with that class.
However, you want the fade-out animation to trigger whenever you want, with an event. Like you said, it must trigger whenever the button Xis clicked.
So, you need to listen the click event of that button, then trigger the fade-out animation.

When the fade-out animation will be triggered? Whenever you apply the fade-out-container class to the container.

So, to summerize, in the *.html

<div class="fade-in-container id="modal">
   <!-- Only the fade-in-container class -->
</div>
<button id="btn">Fade out</button>

and the script should look like something like *.js

const container = document.querySelector('#modal');
const btn = document.querySelector('#btn');

btn.addEventListener(() => {
   // By adding the class, the animation will be triggered
   container.classList.add('fade-out-container');
});

Hope it clarifies a bit.

this is good but I need set and transform: scale here like a my code in question ? Where to set it ? And where to set fade-out-container class ? — Aleksnadar, Apr 06 '20 at 17:55
You should add to the `.fade-out-container` class as many styles as you want to apply by the time you are "closing" the modal. If you want these styles to be animated, you can apply them to the `fade-out` animation. Now, the `.fade-out-container` should be added to the class list whenever you are closing the dialog/modal. Consider awaiting for the animation to end before you actually dispose the modal. — VRoxa, Apr 06 '20 at 18:02
No. The desired behavior of you button is just to close or do whatever you want to. The button, for now, just fires a function (see above) to close the modal. Before you close the modal, you can then apply the `fade-out-container` class TO THE MODEL, not to the button. Plase take a look the the example I just posted. — VRoxa, Apr 06 '20 at 18:11
Not exactly. Your HTML should only define the container modal to have a `fade-in-container`. Whenever it renders, its animation will be triggered. So, when it renders from fresh, you want to trigger the `fade-in` animation, which lives in `fade-in-animation` class. On the other hand, if you want to trigger the `fade-out` animation, I must apply dynamically the `fade-out-container` class to the container, just whenever you need to. I will edit the anwers to show off a bit examples... — VRoxa, Apr 06 '20 at 18:17
this is nice but how to do this in Angular ng bootstrap ? :( — Aleksnadar, Apr 06 '20 at 18:38
Well, it is even easier since Angular has a powerful [animation environment](https://angular.io/guide/animations). You should check it out. — VRoxa, Apr 07 '20 at 00:41

How to set scale fade in fade out in the reverse direction?

1 Answers1