文本更改时角度淡入/淡出不起作用

Question

我目前正在尝试用 Angular 构建一个单词轮播。这个想法是有一个包含 x 元素的数组，这些元素每 3 秒改变一次，并带有淡入淡出，这样看起来就不难了。问题是我刚刚设法在初始页面加载时显示淡入淡出动画，但不是在每个单词更改时显示淡入淡出动画。

这是我的动画：

animations : [
  trigger('fadeAnimation', [
    state('in', style({opacity: 1})),
    transition(':enter', [
      style({opacity: 0}),
      animate(600)
    ]),
    transition(':leave',
      animate(600, style({opacity: 0})))
  ])
]

这是我的 HTML 元素：

<span *ngIf="wordCarousel" id="word-carousel"
      #wordCarousel [@fadeAnimation]="'in'">{{wordCarousel[0]}}</span>

这是我改变话的地方：

@ViewChild('wordCarousel', {static: false}) wordCarouselEl: ElementRef;

wordCarousel = [
  'Hallo',
  'Hello',
  'Servus'
];
wordCounter = 1;

ngAfterViewInit() {
  if (this.wordCarousel) {
    setInterval(() => {
      this.wordCarouselEl.nativeElement.innerHTML = this.wordCarousel[this.wordCounter];
      this.wordCounter++;
      if (this.wordCounter >= this.wordCarousel.length) {
        this.wordCounter = 0;
      }
    }, 3000);
  }

您可以在这里找到一个工作示例： https: //angular-ivy-gsunum.stackblitz.io

谢谢你帮我找到问题。

Answer 1

Jo，我更喜欢用它(animation.done)来控制动画何时完成。所以我不能使用:enterand :leave。如果您在建议的 SO 和 stackblitz 中看到我的答案，您有两个动画，一个使用两个 div，另一个仅使用一个。

想象一些像：

animations: [
    trigger("fadeAnimation", [
      transition("false=>true", [
        style({ opacity: 0 }), //At begin animation, opacity=0
        animate("2500ms", style({ opacity: 1 }))  //the animation makes opacity=0 to opacity=1
      ]),
      //the animate("2500ms 2000ms" means that the animation spend 2500ms, 
      //but start after 2000ms. So opacity=1 2000ms, then goes to 0 in 2500ms
      transition("true=>false", [
        //here don't use a "initial style", simply makes opacity goes to 0
        animate("2500ms 2000ms", style({ opacity: 0 }))])
    ])
  ]

查看值如何为假和真，并且没有必要定义状态“in”

你的 .html 像：

animations: [
    trigger("fadeAnimation", [
      transition("false=>true", [
        style({ opacity: 0 }), //At begin animation, opacity=0
        animate("2500ms", style({ opacity: 1 }))  //the animation makes opacity=0 to opacity=1
      ]),
      //the animate("2500ms 2000ms" means that the animation spend 2500ms, 
      //but start after 2000ms. So opacity=1 2000ms, then goes to 0 in 2500ms
      transition("true=>false", [
        //here don't use a "initial style", simply makes opacity goes to 0
        animate("2500ms 2000ms", style({ opacity: 0 }))])
    ])
  ]

看到它[fadeAnimation]等于一个“变量”，如果我们将变量从 true 更改为 false，然后从 false 更改为 true，动画就会开始，所以

  toogle:boolean=true;  //declare the variable "toogle"

  ngAfterViewInit() { //in ngAfterViewInits "begins" the animation
                      //see that we use a setTimeout, we want that Angular
                      //"paint" the elements and, after, change the variable
    setTimeout(()=>{
       this.toogle=false;
    })
  }

嗯，函数 nextWord

nextWord(event: any) {
      //we change the toogle
      this.toogle = !this.toogle;

      //if event.fromState (the value of the animation) is true (when pass from true to false)
      if (event.fromState)
        this.wordCounter = (this.wordCounter + 1) % this.wordCarousel.length;
  }

堆栈闪电战