@Component({
selector: 'app-post-detail-main',
templateUrl: './post-detail-main.component.html',
styleUrls: ['./post-detail-main.component.scss'],
animations: [
flyIn
]
})
import { flyIn } from '../../animations/fly-in';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
export const flyIn = trigger('flyIn', [
state('in', style({ transform: 'translateX(0)' })),
transition('void => *', [
animate(300, keyframes([
style({ opacity: 0, transform: 'translateX(-100%)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(25px)', offset: 0.3 }),
style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 })
]))
]),
transition('* => void', [
animate(300, keyframes([
style({ opacity: 1, transform: 'translateX(0)', offset: 0 }),
style({ opacity: 1, transform: 'translateX(-25px)', offset: 0.7 }),
style({ opacity: 0, transform: 'translateX(100%)', offset: 1.0 })
]))
])
]);
Angular实现动画
猜你喜欢
转载自my.oschina.net/u/2285087/blog/2963980
今日推荐
周排行