标签: angular-animations

我正在尝试为ngFor.

每个项目必须在前一个项目之后几毫秒进行动画处理。

这是我的组件代码：

@Component({
    selector: 'bookmark-list',
    templateUrl: './bookmark.list.component.html',
    providers: [BookmarkService],
    styleUrls: ['./bookmark.list.component.less'],
    animations: [
        trigger('myAwesomeAnimation', [
            transition(':enter', [
                style({transform: 'scale(0.8)',}),
                animate('1.5s ease-out', style({transform: 'scale(1)',})),
            ]),
        ])
    ]
})

以及它的 html 标记：

<div class="col-sm-6 col-md-4 col-lg-3" *ngFor="let bookmark of bookmarks | bookmarkPipe:search">
  <div [@myAwesomeAnimation]='"large"'>
    <bookmark-item [bookmark]="bookmark"></bookmark-item>
  </div>
</div>

有没有办法将延迟作为角度转换的参数传递？

编辑

根据 Oluwafemi Sule 的回答，交错是解决方案：

    transition('* => *', [
        query(':leave', [
          stagger(
            100, [
              animate('0s ease-in-out', style({
                transform: 'scale(0.8)'
              }))
            ]
          )
        ], {optional: true}),
        query(':enter', [
          style({
            transform: 'scale(0.8)', …

我附加到 div 的 Angular 动画在 Chrome 中工作（将 0 的高度增加到高度：'*'）。我已经导入了所有必要的 polyfills 并安装了 web-animations-js

高度增加了，但是在 IE 和 Firefox 中没有发生动画过渡。

动画.ts

import {
  trigger,
  state,
  style,
  transition,
  animate
} from "@angular/animations";

export const Animations = {
  animations: [
    trigger("expansionTrigger", [
      state(
        "true",
        style({
          height: "*",
          display: "inline-block",
          width: "100%",
          overflow: "hidden"
        })
      ),
      state(
        "false",
        style({
          height: "0",
          display: "none",
          padding: "0",
          overflow: "hidden"
        })
      ),
      transition("true => false", animate("1s 100ms ease-out")),
      transition("false => true", animate("1s ease-in"))
    ]),
    trigger("fadeInTrigger", [
      state(
        "true",
        style({ …

我正处于向角度应用程序添加路由器转换的阶段，我面临着奇怪的问题。for 的样式router-outlet应用于 DOM 层次结构中位于其下方的元素。

这是我的代码：

<main role="main">
  <!-- Header -->
  <app-header class="topnavbar-wrapper"></app-header>
  <!-- Page content-->
  <div [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
    <router-outlet #o="outlet"></router-outlet>
  </div>
  <!-- Footer -->
  <app-footer></app-footer>
</main>

造型：

main {
  box-sizing: border-box;
  margin-top: 4.5rem;
  min-height: 92vh;
  padding-bottom: 4rem;
  /* Height of footer */
  position: relative;
}
router-outlet ~ * {
  position: absolute;
  height: 100%;
  width: 100%;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  color: #fff;
  background-color: $secondary;
}

动画工作很顺利，我对此没有任何问题。但是路由器出口样式应用于其下方的元素，这使得页脚固定在底部，覆盖内容。如果我清除路由器出口元素的样式，则动画将无法正常工作。

正如您在屏幕上看到的，<app-overview>元素的router-outlet样式是导致问题的原因。我想这个解决方案在于正确的 …

在我当前的项目中，我试图摆脱路由时跳过的 Angular 动画。在我的模板中，我在 css 网格布局中有不同的带有mat-card 的“小部件” ，我想让它们平滑地出现和消失。

我的子组件中的动画（路线指向的）看起来像

animations: [
  trigger('cardAnimation', [
    state('void', style({ opacity: 0, transform: 'scale(0.5)' })),
    state('*', style({ opacity: 1, transform: 'scale(1)' })),
    transition('void => *', animate('500ms ease-in')),
    transition('* => void', animate('500ms ease-in'))
  ])
]

简化后的模板如下所示

<mat-card @cardAnimation>
</mat-card>

<mat-card @cardAnimation>
</mat-card>

卡片会显示动画，但路线会直接更改为下一条路线，而无需等待动画。我还测试了animateChild()在query过渡内部使用，但这没有帮助。如何让路由器等待它们？

谢谢并欢呼！

我目前正在学习 Angular 6，但遇到了一些问题。我正在使用本教程：https : //www.yearofmoo.com/2017/06/new-wave-of-animation-features.html

当我单击按钮时，动画按预期触发，但在淡出后文本再次弹出。任何想法为什么它会切换回原始状态？

提前致谢

应用程序组件.html

<button (click)="toggle()">Toggle Fade</button>
<div [@someCoolAnimation]="bindingVar">hello there</div>

app.component.ts

import { Component } from '@angular/core';
import {trigger, transition, style, animate} from "@angular/animations";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  animations: [
    trigger('someCoolAnimation', [
      transition('* => fadeIn', [
        style({ opacity: 0 }),
        animate(1000, style({ opacity: 1 }))
      ]),
      transition('* => fadeOut', [
        animate(1000, style({ opacity: 0 }))
      ])
    ])
  ]
})
export class AppComponent {
  bindingVar = '';
  fadeIn() {
    this.bindingVar = 'fadeIn';
  } …

我在 Angular 7 中设置了更改路线时的幻灯片动画。我现在遇到的问题是动画卡顿，因为我导航到的组件正在生命周期的动画期间执行代码OnInit。

动画完成后如何初始化组件的代码以防止丢帧？

编辑：

我正在使用路由器动画，这是我的设置：

app.component.html:

<div [@routeAnimations]="prepareRoute(outlet)">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

app.component.ts:

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  animations: [routeAnimations]
})
export class AppComponent {
  prepareRoute(outlet: RouterOutlet) {
    return outlet && outlet.activatedRouteData && outlet.activatedRouteData.animation;
  }
}

app-routing.module.ts:

const routes: Routes = [
  {
    path: 'sign-in',
    loadChildren: './modules/sign-in/sign-in.module#SignInModule',
    data: {animation: 'slideLeft'}
  },
  {
    path: 'dashboard',
    component: DashboardComponent,
    data: {animation: 'slideRight'}
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

animations.ts: …

在 Angular 9动画中，如何从组件本身触发动画？我假设我会在组件本身中手动执行此操作，因为它会跟踪创建图形时的状态。与使用模板表达式相反，在模板表达式中，父级将通过数据绑定和主机属性来跟踪状态。

<div class="chart-body">
  <div *ngFor="let chart of charts | async | daysFilter:7" class="last-seven-days-body">
      <line-chart
        [curve-data]="chart"
        graph-size="med"></line-chart>
  </div>
</div>

@Component({
  selector: 'line-chart',
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.css'],
  animations: [
    trigger('fadeIn', [
      transition('void => *', [
        style({ opacity: 0 }),
        animate(2000, style({opacity: 1}))
      ])
    ])
  ],

})

export class LineChartComponent {
  @Input('curve-data') curveData: Array<object>;
  @Input('graph-size') graphSize: String;


  constructor(
    private lineChartService: LineChartService,
    private elRef: ElementRef,
    private fadeInStart: Boolean,
  ) { }    

  ngAfterViewInit() {
    this.lineChartService.makeGraph(
      this.curveData,
      this.elRef.nativeElement,
      this.graphSize,
    );

    this.fadeInStart = …

我一直在尝试使用@HostBinding装饰性设置动画参数，但似乎不起作用，我想念的是什么

animations: [
    trigger('animateMe', [
      state('void', style({ opacity: 0 })),
      transition(':enter, :leave', [ // void <=> *
        animate('{{ easeTime}}ms {{ transitionTimingFn }}')
      ])
    ])
  ]

和主机绑定

@HostBinding('@animateMe') state = {
    value: 'void',
    params: {
      easeTime: 5000
    }
  };

我用 Angular 写了一个抽屉动画。看起来像这样：

  transition(':enter', [
    style({height: '0', opacity: 0}),

    group([
      animate(300, style({height: '*'})),
      animate('300ms ease-in-out', style({'opacity': '1'}))
    ])

  ]) ,
  transition(':leave', [
    style({height: '*', opacity: 1}),

    group([
      animate(300, style({height: 0})),
      animate('300ms ease-in-out', style({'opacity': '0'}))
    ] )
    ])

我的主 div（此动画粘贴的位置）也有一个填充（所有 4 个方向均为 20 像素）。

问题：只要 div 可见（通过 *ngIf），我的高度动画就会开始工作。但是元素的填充立即存在.. 其余的将被动画化。所以它在动画开始时有一个闪烁的效果。

我怎样才能得到填充动画？或者我应该改变什么？

我正在尝试在列表中添加交错动画。到目前为止，我已经成功地加载了交错动画。除了加载时，我希望在将新项目添加到数组时触发交错动画。

我按照这个例子： https : //medium.com/google-developer-experts/angular-applying-motion-principles-to-a-list-d5cdd35c899e

并提出了一个快速测试： https : //stackblitz.com/edit/angular-stagger-animation-test2

在app.component.ts我定义交错动画和在child.component.ts我定义元素的动画。

交错动画：

trigger('list', [
    transition(':enter', [
        query('@animate',
            stagger(250, animateChild())
        )
    ])
])

在query('@animate')得到孩子的构成要素，与animateChild()引发子组件动画。

儿童动画：

trigger('animate', [
  transition(':enter', [
    style({ opacity: 0, transform: 'translateY(-10px)' }),
    animate('250ms', style({ opacity: 1, transform: 'translateY(0px)' }))
  ]),
  transition(':leave', [
    style({ opacity: 1 }),
    animate('250ms', style({ opacity: 0, transform: 'translateY(10px)' }))
  ])
])

我的情况的主要区别在于我一次将多个对象添加到数组中。不知道有没有可能让新项目以交错的方式进入页面。

这是我下面的代码，我想无限地迭代动画并停止并在我编写的组件中开始我写在下面的代码

@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
  animations: [
    // Each unique animation requires its own trigger. The first argument of the trigger function is the name
    trigger('run', [transition('void => *',[animate(1000, keyframes([
      style({transform: 'translateX(0)    rotateY(0)',        offset: 0}),
      style({transform: 'translateX(10%)  rotateY(70deg)',    offset: 0.33}),
      style({transform: 'translateX(20%) rotateY(30deg)',   offset: 0.66}),
      style({transform: 'translateX(0%)',                  offset: 1.0})
    ]))
    ])  
  ])  
]
}) 

在 HTML 文件中，我写了下面的代码

<img  @run id="animicon" src="assets/.../logo_1.png" style="background:black"  
                                                                   class="image--background">

我正在尝试用角度实现简单的动画。单击按钮后，我将showStatefrom 的状态更改为shown。由于我使用 *ngIf 我void在动画中使用了关键字，但它不起作用。

堆栈闪电战

CSS

p {
  border: 1px solid black;
  background-color: lightblue;
  padding: 10px;
}

应用程序组件.ts

import { showStateTrigger } from './animations';
import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"],
  animations: [
    showStateTrigger
  ]
})
export class AppComponent {
  isShown = false;
}

超文本标记语言

<button (click)="isShown = !isShown">Toggle Element</button>
<p [@showState]="isShown ? 'shown' : 'notShown'" *ngIf="isShown"> You can see me now!</p>

动画.ts

从“@angular/animations”导入{状态、样式、过渡、触发器、动画}；

导出 const showStateTrigger = …

我们如何使用Angular 6动画创建摇动动画？该动画应看起来像是“摇动”动画Animate.css