How to switch animation from Angular to css

Question

I have a fade-in/out animation working perfectly using @angular/animation, but I need to pass this animation to css and take this dependence off of @angular/animation

My animation (I just pass the [@fadeInOut] attribute in my div and it works):

animations: [
    trigger('fadeInOut', [
      state(
        'void',
        style({
          opacity: 0
        })
      ),
      transition('void <=> *', animate(300))
    ])
  ]

i tried to do this in css but it didn't work:

.fadeinout{
  animation: fade 0.3s linear forwards;
}

@keyframes icon-fade-in-out {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }

}

Please could you put up a complete working snippet that we can try as I have been unable to see the fadein/out effect not working - seems fine to me but it may be you are after a different effect from what I saw. And did you want the animation to run either forever or for several cycles? — A Haworth
– A Haworth, Commented Aug 5, 2021 at 14:50
Hi. I want it to fade-in when the element enters the screen and fade-out when the element leaves (when I click to close or when it stays on for a while that I set). I fixed the css of the question. The angular animation works perfectly, but the css just the fade-in — ramos97
– ramos97, Commented Aug 5, 2021 at 14:55
You probably also need Javascript and, for exmaple, IntersectionObserver. — A Haworth
– A Haworth, Commented Aug 5, 2021 at 15:01

chris burd · Accepted Answer · 2021-08-05 15:10:16Z

1

you should be using keyframes and webkit-keyframes incase the browser doesn't support it. I like to create 20 steps on mine because I think it looks a lot cleaner and not so jumpy on the fade in.

.fade-in {
    -webkit-animation: fade-in .8s steps(20, end) both;
            animation: fade-in .8s steps(20, end) both;
}

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

you can read about it here:

https://css-tricks.com/snippets/css/keyframe-animation-syntax/

in your function you can use renderer2 - in response to your comment this is how we did it and it works. I could have combined the classes but we were testing each on individually to make sure they injected into the Dom timely and in order.

 const loading= document.getElementById('loading');
      const signinElement = document.getElementById('signinelement');

    this.renderer.removeClass(signinElement, 'show');
    this.renderer.removeClass(signinElement, 'fade-in');
    this.renderer.removeClass(loading, 'hidden');

    this.renderer.addClass(signinElement, 'hidden');
    this.renderer.addClass(signinElement, 'fade-out');
    this.renderer.addClass(loading, 'show');

    this.renderer.addClass(loading, 'fade-in');
    setTimeout(()=>{
      


  // this.renderer.addClass(signinElement, 'show');
  // this.renderer.addClass(signinElement, 'fade-in');
 
      setTimeout(()=>{
        this.signin.googleSignin();
      }, 500)
     

    }, 500)

edited Aug 5, 2021 at 15:10

answered Aug 5, 2021 at 14:42

chris burd

8584 silver badges9 bronze badges

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

4 Comments

ramos97 Over a year ago

Hi Cris, tks for the answer. This works for fade-in, but it doesn't work for fade-out. when I click to close the element or when the element stays the time on the screen that I determined, it closes without animating. It has the same behavior as the css I put

chris burd Over a year ago

we went through this too man. I ended up using renderer 2 and appending the class via a function and then clearing it.

chris burd Over a year ago

added the renderer 2 typescript so you can see we did it hope it helps you. I also am not a fan at all of angular animations.

chris burd Over a year ago

we also force a full second to view the animation through a timeout - and you see our animation is only .8seconds

Collectives™ on Stack Overflow

How to switch animation from Angular to css

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related