Angular: Components disappear when I add animations to components

Question

So I was hoping to add animations to my web page. I at first tried difficult ones and that didn't work out (I'm very unfamiliar with angular animations). Now I tried a basic one, but even now it doesn't work.

I added a basic animation to the component. When the element enters the page I want the opacity to change from 0 to 1 over a time period of 2 seconds. When I have the animation property in my component decorator my template isn't showing in the browser (also no errors in the console). When I remove the animation it works like before and shows my component (without animation of course)

Can someone see where I'm wrong?

Component decorator

@Component({
    selector: 'find-locals',
    styleUrls: ['find-locals.component.css'],
    templateUrl: 'find-locals.component.html',
  animations: [
    trigger('tijl', [
      state('start', style({
        opacity: 0
      })),
      transition(':enter', [
        animate(2000)
      ])
    ])
  ]
})

Template

<div @tijl class="header-box header-box--left">
                <h3 class="profileSection__data">Content</h3>
              </div>

user184994 · Accepted Answer · 2018-08-25 21:30:09Z

1

I managed to get it to work with the following:

  animations: [
    trigger('tijl', [
      state('start', style({
        opacity: 0
      })),
      transition(':enter', [
        style({ opacity: '0' }),
        animate(2000)
      ])
    ])
  ]

Here is a Stackblitz demo

answered Aug 25, 2018 at 21:30

user184994

18.3k2 gold badges51 silver badges54 bronze badges

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

Comments

Muhammed Albarmavi · Accepted Answer · 2018-08-25 22:46:32Z

0

Try this way

animations: [
    trigger('tijl', [
      transition(':enter', [
        style({ opacity: '0' }),
        animate(2000)
      ])
    ])
  ]

animate will role back the style over 2 second

stackblitz demo

answered Aug 25, 2018 at 22:46

Muhammed Albarmavi

24.5k9 gold badges72 silver badges92 bronze badges

Collectives™ on Stack Overflow

Angular: Components disappear when I add animations to components

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related