Ngx-modal custom animation

[ianhyun007]

I want to have my modal to be slided in from right side and slided out to right side when closing.

For opening (sliding in from right), I was able to "somehow" achieve it by modifying the css as below:

.modal-content { animation-name: example; animation-duration: 0.8s; } @keyframes example { 10% { left: 90vw; } 50% { left: 50vw; } 100% { left: 0vw; } }

But I can not apply the sliding out animation which made me struggle for full one day.

If someone knows about solution to my situation, please help by sharing.

Thank you.

[leifermendez]

Hi @ianhyun007 per default ngx-bootstrap set a class name to open effect and close effect. So you should make your owner custom class based on the default names.

https://imgur.com/NWXs1UR Sample for the next effect

  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  border-radius: 0;
}

.modal-backdrop {
  transition: opacity .05s linear;
}

.modal.fade.show .modal-content {
  -webkit-animation-name: anim-open;
  animation-name: anim-open;
  -webkit-animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
  animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);
}

.modal.fade .modal-content {
  -webkit-animation-name: anim-close;
  animation-name: anim-close;
}

@-webkit-keyframes anim-open {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0, 0, 1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
  }
}

@Keyframes anim-open {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0, 0, 1);
    transform: scale3d(0, 0, 1);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@-webkit-keyframes anim-close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.5, 0.5, 1);
  }
}

@Keyframes anim-close {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: scale3d(0.5, 0.5, 1);
    transform: scale3d(0.5, 0.5, 1);
  }
}
`