angular - 角度反弹动画
问题描述
我在我的应用程序中使用了角度动画插件(https://www.npmjs.com/package/@angular/animations)。现在,当阵列要推送或弹出服务时,我需要反弹。
这是我的模板
<h2 *ngIf="standalone" class="card-header h6 bg-transparent text-center">
{{ 'ideas.merge-cart.heading' | translate }}
<span *ngIf="service.ideas.length > 0" class="badge badge-primary badge-notify" [@bounceIn]>{{service.ideas.length}}</span>
</h2>
这里施工
constructor(private ideaService: IdeaService, private timeService: TimeService, public mergeCartService: MergeCartService) {
}
这是我的动画
export const bounceIn = trigger('bounceIn', [
transition(':enter', [
style({ transform: 'scale(0.5)', opacity: 0 }),
animate('1s cubic-bezier(.8, -0.6, 0.2, 1.5)',
style({ transform: 'scale(1)', opacity: 1 }))
])
]);
添加弹跳动画,如https://daneden.github.io/animate.css/
. 当阵列要推送或弹出时,您能否帮助我如何创建反弹?提前致谢。
解决方案
使用动画关键帧很容易......
@Component({
selector: 'app-animations',
template: `
<p>Play animation: <button (click)="bounceDivState='active'">Play</button></p>
<div [@bounceDiv]="bounceDivState"></div>
`,
animations: [
trigger('bounceDiv', [
state('initial', style(divStyle)),
state('active', style(divStyle)),
transition('* => active', [
animate('2s', keyframes([
style({ transform: 'scale(1,1) translateY(0)' }),
style({ transform: 'scale(1.1, 0.9) translateY(0)' }),
style({ transform: 'scale(0.9, 1.1) translateY(-100px)' }),
style({ transform: 'scale(1.05, 0.95) translateY(0)' }),
style({ transform: 'scale(1,1) translateY(-7px)' }),
style({ transform: 'scale(1,1) translateY(0)' }),
]))
])
])
]
})
export class AnimationsComponent {
bounceDivState = 'initial';
}
推荐阅读
- javascript - Mongo Operations 饿死了
- r - 具有月份(整数)和年份(整数)的矩阵,我希望使用 R 以日期或 POSIX 格式提取它
- java - 自动装配 NullPointerException SpringBoot
- shell - mailx 不工作,但 sendmail 工作
- laravel - '忘记'每个集合中的键
- c++ - 重载 + 和 - 运算符时出错
- batch-file - 自动化 FFmpeg/多核支持
- python - 循环日期
- kubernetes - K8s集成EFK,状态码406被抛出
- python - Pyinstaller:exe文件不运行;编码错误