标签: angular-animations

我正在尝试使用Angular2动画系统,用于伪元素:before.根据动画流程,我需要定义动画状态:

animations: [
trigger('heroState', [
  state('inactive', style({
    backgroundColor: '#eee',
    transform: 'scale(1)'
  })),
  state('active',   style({
    backgroundColor: '#cfd8dc',
    transform: 'scale(1.1)'
  })),
  transition('inactive => active', animate('100ms ease-in')),
  transition('active => inactive', animate('100ms ease-out'))
])]

然后将其附加到DOM元素,如下所示:

<ul>
<li *ngFor="let hero of heroes"
    [@heroState]="hero.state"
    (click)="hero.toggleState()">
  {{hero.name}}
</li>

但是,我想将其附加到伪before元素.我怎样才能做到这一点？

我切换MdTabGroup到md-tab-nav-bar/ md-tab-link指令,以便能够将路由分配给各个标签页.不幸的是,我在这个过程中丢失了滑入式动画(似乎没有指令的动画),所以我试图模仿行为MdTab到目前为止没有成功.

这是使用tab指令的模板:

<div class="ink-results" *ngIf="model && (model | async).length > 0" >
    <nav md-tab-nav-bar>
        <a md-tab-link
            *ngFor="let browser of model | async;trackBy: trackByBrowserId"
            [routerLink]="['/results', browser.id]"
            routerLinkActive #rla="routerLinkActive"
            [active]="rla.isActive">
            {{browser.name}}
        </a>
    </nav>
    <router-outlet></router-outlet>
</div>

这是路由到的模板:

<div class="ink-explorer">
    <div class="ink-items">
        <div class="ink-item"
            [@flyInOut]="state"
            *ngFor="let result of results | async;trackBy: trackById"
            routerLinkActive="ink-active-item">
            <a [routerLink]="[result.id]">
                <md-icon svgIcon="flask" 
                    [ngClass]="{ 'ink-failed': (result.status === 2), 'ink-pending': result.status === 4, 'ink-success': result.status === 6 }">
                </md-icon>
                <div class="ink-item-title">{{result.description}}</div>
            </a>
        </div> …

我为Angular 6应用程序导入NoopAnimationsModule后出现此错误

ERROR TypeError: this.driver.matchesElement is not a function
    at TransitionAnimationEngine.push../node_modules/@angular/animations/fesm5/browser.js.TransitionAnimationEngine.processLeaveNode (browser.js:2976)

我已经在Angular中创建了一个布局管理器,它可以接收组件,然后在视图中显示它,并在视图中显示每个组件时将动画添加到视图中.

在单个时刻,可以在视图中显示一个面板或最多两个面板.

这是Stackblitz link同样的问题,这是过渡不平滑,它也显示为流线型,因为它应该是设计如下.

现在我想要实现的是当应用程序加载1-2时默认显示但是当我更改面板时,转换会像

1-3当2移动到视野之外它应该向左滑动和缓和而且3应该进入并且缓和.然后,如果从1-3开始我们进入2-3 1应该向右缓和,2应该滑入.

此外,面板可以占屏幕宽度的一些百分比(33%,66%或100%).

我不确定我是否能够正确地解释它我已经被困在这几个星期过渡如果有人可以帮助它会很棒,谢谢

感谢萨达姆帮助创建了这个动画,这正是我想要的动画 - https://imgur.com/a/qZ3vtDb这仅用于视觉目的

我有一个带动画的子组件

child.component.ts

@Component({
  selector: 'child',
  animations:[
    // animations
   ]
})
export class ChildComponent { ... }

还有一个父组件,它在html中有2个子组件

parent.component.hmtl.ts

...
<child></child>
<child></child>
...

Stackblitz示例

我想要实现的是错开父组件中子组件的动画.因此,第二个子组件应在X秒后开始动画.

animateChild()听起来可能有用,但我无法弄清楚如何使用它.这是正确的解决方案吗？如果是这样,一个例子真的很有帮助.

提前致谢

编辑:animateChild()似乎不适用于这种情况.看起来它只适用于父组件中定义的动画.

编辑2:我认为可能有一个解决方法是在子组件内部添加动画延迟.

child.component.ts

@Component({
  selector: 'child',
  animations:[
    animate(x),
    // animations
   ]
})
export class ChildComponent { ... }

x将是一个为每个子组件增加的变量.这种解决方法对我来说有点混乱

EDIT3:到目前为止,anwers或多或少是我在第二次编辑中提到的解决方案.虽然这些确实有用,但我仍然认为这些是解决方法.

我正在寻找一个只涉及父组件的解决方案,因此子组件应该保持在这个非工作示例中的样子

我试图动画我的页面,但有以下问题:
我的页面上有内容div,以及在内容上方打开另一个div的按钮.我希望那个div能够褪色并滑入,并且下方也可以向下滑动.我为上面的div创建了我想要的动画,点击时打开,但不明白如何处理内容div,示例代码如下:

<div class="wrapper">
  <button (click)="animated = !animated"></button>
  <div *ngIf="animated" [@slideInOutAnimation] class="animated-div">
  THIS DIV IS ANIMATED</div>

  <div class="content">THIS IS CONTENT DIV</div>

</div>

TYPESCRIPT:
animations: [
trigger('slideInOutAnimation', [

  state('*', style({

  })),
  transition(':enter', [
    style({
      transform: 'translateY(-10%)',
      opacity: 0
    }),
    animate('.5s ease-in-out', style({
      transform: 'translateY(0)',
      opacity: 1
    }))
  ]),
  transition(':leave', [
    animate('.5s ease-in-out', style({
      transform: 'translateY(-10%)',
      opacity: 0
    }))
  ])
])
]

我应该创建一些其他触发器来移动我的内容div与动画的内容吗？

我有一个表单组件,其中包含字段,某些字段我想在它们出现在表单中时进行动画处理,但不是每个字段.

<div *ngFor="let field of form.Fields">
    <div [ngSwitch]="field.Type" [@slideOut]>
        <!-- more field stuff -->
    </div>
</div>

有了其他属性,我可以做这样的事情[attr.required]="field.Required"但[attr.@slideOut]似乎没有用.

理想情况下,我想在我的场上有一个动画属性,所以我可以传递这样的动画,[@field.Animation]但我找不到任何关于如何做这样的事情的文档.有任何想法吗？

在我来到这里之前，我一直在努力解决这个问题。本质上，我有一个使用动画创建细节行的 Angular Material 表。当表格排序时，它会重新排列数据。在此过程中，某些详细信息行会转换为 void。之后，即使动画事件正在触发，细节行也会停止播放动画。我怀疑 MatSort 以某种方式破坏了动画，但我不确定如何。

角材料表：

<mat-table matSort
        [dataSource]="tableData"
        multiTemplateDataRows>

        <!-- More Column -->
        <ng-container matColumnDef="more">
            <mat-header-cell *matHeaderCellDef 
                translate>
                More
            </mat-header-cell>
            <mat-cell *matCellDef="let scheduleCourse">
                <p class="fa fa-angle-right" *ngIf="!tableData.checkExpanded(scheduleCourse)"></p>
                <p class="fa fa-angle-down" *ngIf="tableData.checkExpanded(scheduleCourse)"></p>
            </mat-cell>
        </ng-container>

        <!-- Meets Column -->
        <ng-container matColumnDef="meets">
            <mat-header-cell *matHeaderCellDef
                mat-sort-header="Meets" 
                translate>
                Meets
                <filter [data]="tableData" columnName="Meets" dataType="string"></filter>
            </mat-header-cell>
            <mat-cell *matCellDef="let scheduleCourse">
                {{scheduleCourse.Meets}}
            </mat-cell>
        </ng-container>

        <!-- Term Column -->
        <ng-container matColumnDef="term">
            <mat-header-cell *matHeaderCellDef 
                mat-sort-header="Term"
                translate>
                Term
                <filter [data]="tableData" columnName="Term" dataType="string"></filter>
            </mat-header-cell>
            <mat-cell *matCellDef="let scheduleCourse">
                {{scheduleCourse.Term}}
            </mat-cell>
        </ng-container> …

我需要在ngFor列表填充和显示时为其设置动画.每个元素都应该有一个转换,让我们说这样的话.

我怎样才能做到这一点？

我在Angular的组件中添加了一个动画.然而动画在Chrome和Firefox中运行得很好,但是在IE Edge中,动画不会被触发,尽管样式在状态更改时正确应用,但是没有指定动画.

有没有人有同样的问题？

这是我的代码:

animations: [
    trigger('rowState', [
        state('collapsed', style({
            'height': 0,
            'overflow-y': 'hidden'
        })),
        state('expanded', style({
            'height': '*',
            'overflow-y': 'hidden'
        })),
        transition('collapsed <=> expanded', [animate('1000ms ease-out')])
    ])
]

提前致谢