Question

所以我希望将动画添加到我的网页中。起初我尝试过困难的尝试，但没有解决（我对角度动画非常陌生）。现在，我尝试了一种基本的方法，但即使现在它也无法正常工作。

我向组件添加了基本动画。当元素进入页面时，我希望不透明度在2秒的时间内从0变为1。当我在组件装饰器中拥有animation属性时，我的模板没有显示在浏览器中（控制台中也没有错误）。当我删除动画时，它的工作原理与以前一样并显示了我的组件（当然没有动画）

有人可以看到我错了吗？

组件装饰器

@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)
      ])
    ])
  ]
})

模板

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

Answer 1

我设法使其适用于以下情况：

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

Here is a Stackblitz demo

Answer 2

尝试这种方式

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

动画将在2秒钟内恢复样式

stackblitz demo

角度：将动画添加到组件时，组件消失

2 个答案: