我可以回答这个问题。在 Angular 中，你可以使用 Animation API
实现多段字幕横向
移动。具体
实现方法可以参考以下示例代码：
1. 在 HTML 中定义需要
移动的字幕：
```html
<div class="subtitle-container" #subtitleRef>
<div class="subtitle" *ngFor="let subtitle of subtitles">{{subtitle}}</div>
</div>
```
2. 在 Component 中设置字幕和动画：
```typescript
import { Component, ElementRef, ViewChild } from '@angular/core';
import { trigger, state, style,
animate, transition } from '@angular/animations';
@Component({
selector: 'app-subtitle',
template: `
<div class="subtitle-container" #subtitleRef>
<div class="subtitle" *ngFor="let subtitle of subtitles">{{subtitle}}</div>
</div>
`,
styles: [
`
.subtitle-container {
overflow: hidden;
}
.subtitle {
display: inline-block;
white-space: nowrap;
font-size: 16px;
padding-right: 50px; /*设置字幕
移动的距离*/
}
`
],
animations: [
trigger('subtitleAnimation', [
state('void', style({ transform: 'translateX(100%)' })),
transition(':enter', [
animate('600ms ease', style({ transform: 'translateX(0%)' }))
])
])
]
})
export class SubtitleComponent {
@ViewChild('subtitleRef', { static: true }) subtitleRef: ElementRef;
subtitles = ['This is subtitle 1', 'This is subtitle 2', 'This is subtitle 3']; // 定义需要
移动的多个字幕
constructor() {}
ngOnInit() {
const subtitleEls = this.subtitleRef.nativeElement.querySelectorAll('.subtitle');
subtitleEls.forEach((el, i) => {
el.style.animationDelay = `${i * 3}s`; // 设置不同的动画延迟时间，达到每个字幕错落有致的效果
});
}
}
```
通过上述代码，你可以
实现多个字幕的横向
移动效果。希望能对你有所帮助。
443
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
