主页 / coding / 问题 / 79483747
Accepted
KoZ x Tricky
Asked: 2025-03-04 20:47:55 +0800 CST

如何使用角度动画逐个添加我的内容

  • 772

对于演示页面，我想使用 Angular 动画逐个元素显示页面内容

我的目标是制作一个动画来隐藏我的内容，并为每个元素制作一个动画，但我的内容被很好地隐藏了（：self），但其他动画直到动画结束时才产生效果，此时我的所有内容都同时出现

animations : [ 
    trigger('homeAnimations', [
      transition(':enter', [
        query(':self',[
          style({opacity:0})
        ]),
        query('#presentation h1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation h2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation p', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn3', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
      ])
    ])
  ],
angular

1 个回答

  1. Best Answer

    如果您的元素是的子元素:self，则如果父元素不可见，则子元素将不会显示。

    解决方案：首先隐藏子项：

    animations : [ 
    trigger('homeAnimations', [
      transition(':enter', [
        // hide elements that you do not want to display:
        query('#presentation h1', [
          style({opacity:0})
        ], { optional: true }),
        query('#presentation h2', [
          style({opacity:0})
        ], { optional: true }),
        query('#presentation p', [
          style({opacity:0})
        ], { optional: true }),
        query('#btn1', [
          style({opacity:0})
        ], { optional: true }),
        query('#btn2', [
          style({opacity:0})
        ], { optional: true }),
        query('#btn3', [
          style({opacity:0})
        ], { optional: true }),

        // show them using transition animation:
        query('#presentation h1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation h2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#presentation p', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn1', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn2', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
        query('#btn3', [
          animate('2s', style({ opacity: 1 }))
        ], { optional: true }),
      ])
    ])
  ],
    • 0

相关问题