标签: angular-animations

如何在angular2中制作页面过渡动画？

我试试这是代码,但没有工作

@Component({
   selector:'myPagefirstPage', 
})

@View({
   template: `<div  class="view-animate ng-animate" > 
                 <h1>First Page</h1>
              </div>`

我把我的动画类放在这样的css文件中

.view-animate.ng-enter {....}

但它不起作用

假设我在固定导航栏中有2个路由组件和两个Routerlink来路由它们.当我点击Routerlinks时,我希望它们从右侧滑入.

我不想用css来偏移组件,并使用超时函数来更改css类以让它滑入(例如使用ngStyle或ngClass).

在Angular 2中有没有更优雅的方法来实现这一目标？

谢谢!

我一直在摆弄Angular动画,并想知道是否有最佳/推荐的方法来避免内联样式...例如,

@Component({
selector: 'page-that-needs-anime',
templateUrl: './anime.component.html',
styleUrls: ['./anime.component.scss'],
animations: [
trigger('animeTrigger', [
state('in', style({transform: 'translateY(0)'})),
transition('void => *', [
  animate(700, keyframes([
    style({opacity: 0, transform: 'translateY(-100%)', offset: 0}),
    style({opacity: 1, transform: 'translateY(25px)',  offset: 0.3}),
    style({opacity: 1, transform: 'translateY(0)',     offset: 1.0})
  ]))
]) //you get the idea ... *Import statement is taken out for brevity

无论如何,"动画"可以使用类似styleUrls&templateUrl的引用吗？我见过有人把它称为const但是想知道是否有'Angular官方'方式.

我创建了以下动画:

fade.animation.ts:

import { Component } from '@angular/core';
import { trigger, state, animate, query, transition, style, stagger } from 
'@angular/animations';
export let fade = trigger('fade', [
   state('void', style({ opacity: 0 })),
   transition(':enter, :leave', [
    animate(2000)
   ])
]);

我正在使用下一个组件:

 <div id="mpl_loader" class="divCabeceraTitulo">
        <div class="lineaTitulo">
            <div class="logoMinisterio" [@fade]>
                <img src="assets/imagenes/SRDLOGO.png">
            </div> 
            <div class="logoGesRepro">
               <img  class="imgGesRepro" src="assets/imagenes/gesReproB.png">
            </div>           
            <div class="descripcionAplicacion">
                <span>título</span>
            </div>
        </div>
  </div>

动画工作,问题是它只运行一次,当它加载组件时,我想要的是它"n"次.我怎么了？请帮忙

我有一个带有项目列表的 Angular 4 组件。我按照 Angular 文档 ( https://angular.io/api/animations/animation ) 在添加或删除项目时设置进入和离开动画。但是在加载视图时，列表中的所有现有项目都会播放相同的动画。有没有办法在初始视图加载时关闭动画，但在视图加载后重新启用它？

这个组件的模板是这样的

<ng-template #primary @fading><ng-content select="[primary]"></ng-content></ng-template> // gives error
<ng-template #secondary> <ng-content select="[secondary]"></ng-content></ng-template>


<ng-container *ngIf="(mode | async)=== mode_layout_100_0">
  <div class="h-100">
    <ng-container *ngTemplateOutlet="primary"></ng-container>
  </div>
</ng-container>
<ng-container *ngIf="(mode | async)=== mode_layout_0_100">
  <div class="h-100">
    <ng-container *ngTemplateOutlet="secondary"></ng-container>
  </div>
</ng-container>
<ng-container *ngIf="(mode | async)=== mode_layout_33_66">
  <div class="d-flex flex-row h-100 split-view" @fading> // dosent work 
    <div class="d-none d-sm-none d-md-none d-lg-block col-lg-4 p-0">
      <ng-container *ngTemplateOutlet="primary"></ng-container>
    </div>
    <div class="col-12 col-sm-12 col-md-12 col-lg-8 p-0 view-seperator">
      <ng-container *ngTemplateOutlet="secondary"></ng-container>
    </div>
  </div>
</ng-container>
<ng-container *ngIf="(mode | async)=== mode_layout_66_33">
  <div class="d-flex flex-row h-100 split-view"> …

我为 div 元素实现了淡入淡出动画。我想做的是这样的。

• 当页面初始渲染时，有一个 div 元素显示一些数字。右侧和左侧有两个按钮。

• 当用户单击这些按钮之一时，我想删除 div 元素中的数字并添加显示 div 中新创建的数字

我的问题是，当用户单击这些按钮之一时，动画淡出部分的工作淡入部分不起作用。

这是 stackblitz 的 例子

一旦我为我的数据创建了一个服务，动画就停止工作了。看起来是因为当页面最初加载时，ng-repeat 中没有元素（因为它正在获取数据）。似乎与THIS和THIS类似：

错误：

ERROR Error: Unable to process animations due to the following failed trigger transitions @listAnimation has failed due to:

- `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.)

动画片：

trigger('listAnimation', [
      transition('* => *', [
        query(':enter', style({ opacity: 0}), { optional: true }),
        query(':enter', stagger('150ms', [
          animate('.5s ease-in', keyframes([
            style({ opacity: 0, /*transform: 'translateY(-75px)',*/ offest: 0}),
            style({ opacity: .5, /*transform: 'translateY(35px)',*/ offest: .3}),
            style({ opacity: 1, …

我想在单击时同时触发两个动画。动画触发器使用相同的状态，一个放置在外部父 div 上，另一个嵌套在该 div 内。样式已更改，但过渡仅应用于父组件。我在我的父动画中使用了 animateChild 但没有成功。如何在父元素和子元素上应用动画？

动画.ts

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

export const Animations = {
  animations: [
    trigger("expansionTrigger", [
      state(
        "true",
        style({
          height: "*"
        })
      ),
      state(
        "false",
        style({
          height: "0",
          display: "none"
        })
      ),
      transition("false <=> true", [
        group([
          query("@colExpansion", [animateChild()]),
          animate("3s ease")
        ])
      ])
    ]),
    trigger("colExpansion", [
      state(
        "true",
        style({
          "-webkit-box-flex": "0",
          flex: "0 0 66.66667%",
          "max-width": "66.66667%"
        })
      ),
      state(
        "false",
        style({
          "flex-basis": "0",
          "-webkit-box-flex": "1", …

我创建了一个动画，用于在图像发生变化时淡入/淡出图像src。当我在图像之间快速切换时（在动画完成之前），出现以下错误：

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. 
Previous value: 'src: http://localhost/wp-content/uploads/2018/11/billede1.jpg'. 
Current value: 'src: http://localhost/wp-content/uploads/2018/11/billede2.jpg'

但从视觉上看，并没有什么问题。动画工作正常并且显示正确的图像 - 即使我在它们之间快速切换并打印错误。但我想摆脱这个错误。关于我该如何做到这一点有什么想法吗？

动画片：

imageAnimation = trigger('imageAnimation', [
    state('in', style({opacity: 1, })),
    state('out', style({opacity: 0, })),
    transition('in <=> out', [
        animate('0.25s ease')
    ])
])

HTML：

  <div id="main-image-container" (mousemove)="displayBars()" [style.cursor]="mouseMovement ? 'default' : 'none'">
    <img id="main-image" src="{{displayedImage}}" [@imageAnimation]="imgState" (@imageAnimation.done)="onImageAnimationDone($event)">
  </div>
  <div id="bottom-bar">
    <div class="img-container" *ngFor="let img of gun.images">
        <img src="{{img.thumbnail_image_url}}" [class.selected]="img.full_image_url == selectedImage" (click)="setSelectedImage(img.full_image_url)">
    </div>
  </div>

成分：

  onImageAnimationDone(event: any){
    this.displayedImage = this.selectedImage; …