Angular ts实现字幕横向移动
时间: 2023-05-22 13:06:45 浏览: 65
可以使用CSS3中的animation属性来实现字幕横向移动的效果,同时也可以在Angular中使用Typescript来控制动画效果的细节。具体实现方法可以参考以下代码:
HTML部分:
```html
<div class="subtitle-container">
<div class="subtitle" [@moveAnimation]="state">
{{ subtitle }}
</div>
</div>
```
CSS部分:
```css
.subtitle-container {
width: 100%;
height: 50px;
overflow: hidden;
position: relative;
}
.subtitle {
display: inline-block;
white-space: nowrap;
font-size: 18px;
position: absolute;
left: 100%;
animation: move 20s linear infinite;
}
@keyframes move {
0% {
left: 100%;
}
100% {
left: -100%;
}
}
```
Typescript部分:
```typescript
import { Component, Input } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';
@Component({
selector: 'app-subtitle',
templateUrl: './subtitle.component.html',
styleUrls: ['./subtitle.component.scss'],
animations: [
trigger('moveAnimation', [
state('in', style({ transform: 'translateX(0)' })),
transition('void => *', [
style({ transform: 'translateX(100%)' }),
animate('20s linear')
])
])
]
})
export class SubtitleComponent {
@Input() subtitle: string;
state = 'in';
}
```
这里使用了Angular中的动画模块,通过控制state状态实现了字幕从右往左横向移动的效果。同时在CSS中也定义了animation的细节。