我正在try 添加一个动画到Angular 17应用程序,但它并不像预期的那样工作.
基本上有两个divs
,并排,当按下按钮时,左侧被*ngIf
隐藏.左侧的动画按预期工作,但右侧div
不跟随,仅当动画完成时才调整大小.
以下是示例代码:https://stackblitz-starters-uwgcaa.stackblitz.io
我如何让动画在两边都发挥作用?
先谢谢你.
我正在try 添加一个动画到Angular 17应用程序,但它并不像预期的那样工作.
基本上有两个divs
,并排,当按下按钮时,左侧被*ngIf
隐藏.左侧的动画按预期工作,但右侧div
不跟随,仅当动画完成时才调整大小.
以下是示例代码:https://stackblitz-starters-uwgcaa.stackblitz.io
我如何让动画在两边都发挥作用?
先谢谢你.
请将动画从translateX
更改为margin-left
,查看css教程并找到解决方案!
import {
animate,
group,
query,
style,
transition,
trigger,
} from '@angular/animations';
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import {
BrowserAnimationsModule,
provideAnimations,
} from '@angular/platform-browser/animations';
import 'zone.js';
@Component({
selector: 'app-root',
standalone: true,
template: `
<div class="container">
<div class="menu" *ngIf="showMenu" [@slideInOut]="showMenu">Menu</div>
<div class="content">Content<button (click)="toggleMenu()">Teste</button></div>
</div>
`,
animations: [
trigger('slideInOut', [
transition(':enter', [
style({ marginLeft: '-100%' }),
animate('200ms', style({ marginLeft: '0px' })),
]),
transition(':leave', [
animate('200ms', style({ marginLeft: '-100%' })),
]),
]),
],
imports: [CommonModule],
})
export class App {
name = 'Angular';
showMenu = true;
toggleMenu() {
this.showMenu = !this.showMenu;
}
}
bootstrapApplication(App, { providers: [provideAnimations()] });