Angular2组件中的多个动画触发器

Question

Angular2组件中的多个动画触发器

5

我希望在一个组件中定义多个动画触发器。这种情况是否可行？

例如，一个进入场景的触发器和一个悬停触发器。还是说我需要为这种情况定义两个组件（父子组件）？

item.component.ts

// removed the import and class part for better readability

@Component({
  selector: 'item',
  templateUrl: './item.template.html',
  styleUrls: ['./item.style.scss'],
  animations: [
    // page load animation 
    trigger('slideIn', [
        state('in', style({
            opacity: 1,
            transform: 'translateY(0)'
        })),
        transition('void => *', [
            style({
                transform: 'translateY(100%)',
                opacity: 0
            }),
            animate('0.5s 100ms ease-in')
      ])
    ]),


    // <--- this fails
    // hover animation
    trigger('fadeIn', [
      state('over', style({
            opacity: 1
        })),
        transition('void => *', [
            style({
                opacity: 0
            }),
            animate('0.5s 100ms ease-in')
    ])
  ],
})

item.template.html

<div class="item" [@slideIn]="enterState">

    <div class="info">
        SOME INFO
    </div>
    <div class="info-on-hover" [@fadeIn]="hoverState">
        SOME INFO 
    </div>
</div>

噢，有人应该创建标签"angular2-animation"

祝好

- Kevin Regenrek

能否提供Plunker？ - micronyks

这是我建立的东西 http://plnkr.co/edit/8beFC9Y5C2jpD6cV52I0 （试过了...） - Kevin Regenrek

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Filip Lauc · Accepted Answer

我想在一个组件中定义多个动画触发器。这是可能的吗？

是的，您可以拥有您需要的任意数量的触发器。

您还可以在一个触发器中具有多个状态，不仅仅是两个。因此，您可以例如具有“进入”状态和“悬停”状态，并具有不同的状态之间的转换。

例如：

state('in', style({opacity: 1,
            transform: 'translateY(0)'
        })),
state('hover', style({background: 'red'}),
transition('* <=> hover', animate('200ms ease-in'))