标签: angular-animations

在浏览器上启动 Angular 应用程序时遇到问题。一切正常，代码说话，但我仍然收到此错误：

找到了合成属性@routerAnimations。请在您的应用程序中包含 BrowserAnimationsModule或NoopAnimationsModule。

我已经检查了关于这个主题的帖子，有很多帖子，但他们都回答了相同的问题：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

并将其包含在应用程序模块的导入中。

imports: [
    BrowserAnimationsModule,
    ... 
]

这就是我所做的，但仍然出现相同的错误。我一直在寻找这个解决方案的时间。任何人都知道什么可以解决它？谢谢

这是我的 package.json：

{
  "name": "angular-bc",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": …

我有两个路由组件及其容器,我已设置动画触发器@slide,其中我查询每个和相应的动画.

<div [@slide]="o.activatedRouteData.name">
  <router-outlet #o="outlet"></router-outlet>
<div>

RouterModule.forRoot([
  { path: '',      component: HomeComponent,  data: { name: 'home' } },
  { path: 'login', component: LoginComponent, data: { name: 'login' } } ])

trigger('slide', [
  transition('login => home', [
    query('home', style({ left: '-120%', right: '120%' })),
    query('login', style({ left: '0', right: '0' })),

    query('home', animate(duration, style({ left: '0', right: '0' }))),
    query('login', animate(duration, style({ left: '120%', right: '-120%' })))
])

这是有效的,除了第二个动画在开始之前等待第一个动画完成,而我正在寻找的是让它们并行发射的方法.思考？

我正在尝试从Material.io复制此动画:

要像上面示例中第一张卡片上的点击一样导航高度很简单.只是动画高度属性.问题在于点击第二张卡然后将其他卡推开.

对此的一个解决方案是使用滚动来模拟事物被推开的效果.因此,当您单击该项目时,它通过设置高度动画使其更高,但同时也滚动视图.

我的问题:我似乎无法弄清楚如何使用动画滚动@angular/animations.我不能使用style({ scrollTop: 100 }),它只允许根据文档的 CSS属性.

我该如何实现这一目标？如果我animate()出于维护原因可以将其作为动画的一部分来进行(将整个动画保留在代码中的1个位置),那将是很好的,但如果只能使用单独的方法,我猜这也是可以接受的.

我一直对一些我认为是Angular 4动画模块中的错误感到困惑.通过Angular 2.x中的动画,我制作了一个动画,从高度*动画到固定高度.这在Angular 2中运行得非常好.另一方面,当使用Angular 4时,在动画完成之前重新触发动画时,应用动画的元素的高度会出错.通配符(*)高度似乎是导致问题的原因.这是一个可以重现问题的演示片段.如果在元素处于*-height状态时双击该元素,则可以触发该错误:

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

@Component({
  selector: 'app-root',
  template: `
  <h1 [@toggleAnimation]="isEnabled" (click)="isEnabled = isEnabled === 'active' ? 'inactive' : 'active'" style="background: blue">
    {{title}}
  </h1>`,
  animations:
  [
    trigger('toggleAnimation', [
      state('active', style({
        height: '*',
      })),
      state('inactive', style({
        height: '600px',
      })),
      transition('active <=> inactive', animate('500ms ease-in-out'))
    ])
  ]
})
export class AppComponent {
  title = 'app works!';
  isEnabled = 'inactive';
}

如何使用通配符值为高度设置动画有什么问题,或者通配符高度的表现方式是否有问题？

我正在处理的应用程序需要能够在路线中来回导航,因此当您从一个方向导航应用程序时,组件从左向右动画,当您向后导航时,它们从右向左导航.

即

component1 -> component2 =  left -> right animation
component2 -> component1 = right -> left animation

我可以在NG4中轻松实现这一点,但问题是它不会导航退出和输入组件.退出组件刚刚消失,输入组件动画显示.

我也可以在NG2中实现这一点 - 但是当你有条件动画时会出现复杂情况.即.

component2 -> component3 = left -> right animation
component2 -> component1 = right -> left animation

这里的问题是根据下一个或上一个路线触发不同的动画.

有没有人在NG2或4中有解决方案来解决在任一方向同时动画两个视图的问题？

我没有把它放在plunkr中,因为我不知道如何设置NG4应用程序.道歉.

我的NG4解决方案基于这个演示应用程序 https://github.com/matsko/ng4-animations-preview

但基本上在我的app.component.ts我有以下动画:

animations: [
    trigger('routerAnimations',[
        transition('page1 => page2',[
            style({transform: 'translateX(100%)'}),
            animate('500ms')
        ]),
        transition('page2 => page1', [
            style({transform: 'translateX(-100%)'}),
            animate('500ms')
        ]),
        transition('page2 => page3',[
            style({transform: 'translateX(100%)'}),
            animate('500ms')
        ]),
        transition('page3 => page2',[
            style({transform: 'translateX(-100%)'}),
            animate('500ms')
        ]),
        transition('page3 => page4',[ …

我希望这是一个很直接的问题.有没有办法使用角度动画语法来动画元素上的任何高度或位置变化？

例如,如果删除了一个DOM元素导致另一个元素向上移动,那么升级是否可以动画而不必设置状态变量？

<div [@positionChange]></div>

或类似的没有状态的东西.

提前致谢.

我已经阅读了有关Angular的路由器过渡动画的这篇文章:

https://medium.com/google-developer-experts/angular-supercharge-your-router-transitions-using-new-animation-features-v4-3-3eb341ede6c8

和:

路由组件的Angular 2"动画幻灯片"

但是,这太静止了.我希望它左右滑动,并根据标签的顺序正确.

是否可以为此创建路由器动画？我的意思是下面的例子:

https://material.angular.io/components/tabs/examples

看看它是如何载玻片BOTH左和右很自然地取决于你是什么标签.

这必须是动态的,因为选项卡将在运行时添加.

我在一个名为“pointsBalance”的页面上有一个显示数值的表达式。它连接到一个observable，当 pointsBalance 值上升时，我想将颜色更改为绿色，然后返回其原始颜色，如果值下降，则为红色。我以为我可以使用Angular 5 的新动画别名:increment 和 :decrement但我一直遇到问题。

显示积分余额的 HTML：

<div [@valueAnimation]="pointsBalance">{{ pointsBalance }}</div> 

设置动画和可观察的 pointsBalance 的代码：

import { Component, OnInit, Input } from '@angular/core';
import { trigger, style, transition, animate, keyframes, query, 
    stagger, state, group } from '@angular/animations';
import { CompetitionsService } from "../../../shared/index";
@Component({
  selector: 'points',
  templateUrl: './...html',

  animations: [
    trigger('valueAnimation', [
      transition(':increment', group([
        query(':enter', [
          style({ color: 'green', fontSize: '50px' }),
          animate('0.8s ease-out', style('*'))
        ])
      ])),
      transition(':decrement', group([
        query(':enter', [
          style({ color: …

我试图将角度过渡应用于元素,但它不起作用.我也添加了web-animation-js但仍然没有效果.在onMouseleave和onMouseover函数上添加了实现

// package.json

"web-animations-js": "^2.3.1",  

//项目清单

 <li class="list-group-item" (mouseover)="onMouseover()" (mouseleave)="onMouseleave()" [@usrSt]="st" [routerLink]= "['/users', i+1, person.name]" *ngFor="let person of (personsList | filter:coursestat:'chosenCourse'); let i = index">

//列表组件

@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
  animations: [
    trigger('usrSt', [
      state('active', style({ 'background-color': '#cfd8dc' })),
      state('inactive', style({ 'bacckground-color': '#fff' })),
      transition('active => inactive', animate('1400ms ease-in')),
      transition('inactive => active', animate('400ms ease-out'))
    ])
  ]
})

      export class ListComponent implements OnInit, OnDestroy {

      public personsList;
      @Input() id;
      st;
      @Input() coursestat: string;

      constructor(private getDt: InputDataService) {

      } …

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

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

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

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

这是 stackblitz 的 例子