css Angular 17 Animation -在幻灯片左/右两侧同步

i34xakig 于 2024-01-09 发布在 Angular

关注(0)|答案(1)|浏览(131)

我试图添加一个动画到Angular 17应用程序，但它不像预期的那样工作。
基本上有两个divs，并排，当按下按钮时，左侧被*ngIf隐藏。左侧的动画按预期工作，但右侧的div不跟随，只有当动画完成时才调整大小。
下面是示例代码：https://stackblitz-starters-uwgcaa.stackblitz.io
我如何使动画工作在双方？
先谢了。

css

来源：https://stackoverflow.com/questions/77764378/angular-17-animation-synch-both-sides-on-slide-left-right

1条答案

按热度按时间

gmol16391#

请将动画从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()] });

字符串
stackblitz