将角度动画用于动画单词

Question

我对在角度中使用动画相当陌生，我想做的是在句子中创建一个不断变化的世界。

例如： 我有一个水果清单，如{苹果，橙子，香蕉等.}

我想显示：

我喜欢"苹果">

5 秒后将苹果换成橙子，5 秒后将橙子换成香蕉......浏览列表，然后再次转到Apple。如何使用角度动画获得此信息？

Answer 1

你想要的可以在没有动画的情况下实现，你只需要好的老式双向数据绑定和来自 rxjs 的间隔。我继续在stackblitz中创建一个简单的angular-cli项目，继续查看工作示例。

https://stackblitz.com/edit/stackoverflow-51222243

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject, interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
fruit: string;
fruitList: Array<string> = ['apple', 'orange', 'banana'];
ngUnsubscribe: Subject<any> = new Subject();
constructor() { }
ngOnInit() {
// init the first fruit
this.fruit = this.fruitList[0];
// create an interval that is going to fire every 5s
interval(5000)
// unsubscribe from interval when the component is destroyed, averting any memory leak
.pipe(takeUntil(this.ngUnsubscribe))
// subscribe to interval
.subscribe(() => {
// find the current fruit index in the list
const fruitIndex = this.fruitList.findIndex((fruit: string) => fruit === this.fruit);
// get the next fruit from the list
const nextFruit = this.fruitList[fruitIndex + 1];
// if next fruit is defined set displayed fruit with it
// else if next fruit is undefined that means you reached the end of the list 
// so set the displayed fruit with the first list item
this.fruit = nextFruit ? nextFruit : this.fruitList[0];
});
}
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
}

Answer 2

假设问题是关于如何对更改单词进行动画处理，这里有一个简单的演示：

trigger('wordUpdated', [
transition("* => *", group([
query(':enter', [
style({ opacity: 0, transform: 'translateY(40%)' }),
animate('.5s ease-out', style({ opacity: 1, transform: 'translateY(0%)' }))
], { optional: true }),
query(':leave', [
style({ opacity: 1, transform: 'translateY(0%)' }),
animate('.5s ease-out', style({ opacity: 0, transform: 'translateY(-40%)' }))
], { optional: true })
]))
])

模板：

I like <span class="block" [@wordUpdated]="word">
<span class="span" *ngFor="let word of [ word ]">
{{ word }}
</span>
</span>

它还需要一些CSS将旧/新单词放在相同的位置：

span.block {
position: relative;
}
span.span {
position: absolute;
left: 0.3em;
}

Answer 3

这是一种不同的方法=>

在组件中：

public wordList = ['Design', 'Apple', 'orange', 'banana' ];

和创建方法

spanStyle(index, delay, length) {
if (index == 0){
return {'animation': 'rotateWordsSecond '+ delay*length+'s linear infinite 0s' }
}
return {'animation': 'rotateWordsSecond '+ delay*length+'s linear infinite 0s','animation-delay.s': index*delay }
}

在相应的 html 中：

<div class="rw-words">
<span *ngFor="let word of wordList;index as i; let l = count [ngStyle]="spanStyle(i, 3, l)">{{word}} </span>
</div>

对于样式

.rw-words
display: inline
text-indent: 10px
.rw-words span
position: absolute
opacity: 0
overflow: hidden
width: 100%

@keyframes rotateWordsSecond
0%
opacity: 1
animation-timing-function: ease-in
width: 0px
10%
opacity: 0.3
width: 0px
20%
opacity: 1
width: 100%
27%
opacity: 0
width: 100%
100%
opacity: 0