标签: angular-animations
Angular 2 Staggering动画
Angular 2 RC2刚出来,我想知道它是否已经支持交错的动画了*ngFor？在DSL语言文档中提到group和sequence,但没有任何一种交错？
是否交错动画不包括在RC2中？
推荐指数
解决办法
查看次数
每次使用 Angular 4 更改数组时触发动画
每次数组变化都需要触发动画
我目前正在使用 *ngfor 迭代一系列产品，每次长度改变时动画都会触发。我正在使用 Angular 4。
<ul class="items col col-md-12" *ngIf="hasProducts()" [@productsIntro]="products.length">
问题是我需要在每次数组发生变化时触发动画，而不仅仅是数组的长度。有时数组长度相同但数组中的项目不同，因此不会触发动画。
我不确定如何解决这个问题，希望有人能帮助我解决问题。
<ul class="items col col-md-12" *ngIf="hasProducts()" [@productsIntro]="products.length">
<li class="col col-xs-12 col-sm-12 col-md-4" *ngFor="let product of products">
<div class="item">
<a href="" class="product-name">{{product.product_name}}</a>
<div class="image-and-info col col-xs-8 col-sm-8 col-md-12">
<div class="product-thumb">
<img src="../../assets/img-filler.png" alt="{{product.product_name}}">
</div>
<div class="info">
<div class="sku">SKU: {{product.sku}}</div>
<div class="price">Price: {{product.price | currency:'USD':true:'1.2-2'}}</div>
</div>
</div>
<div class="product-col col col-xs-4 col-sm-4 col-md-12">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-solid" (click)="viewProduct(product)">View Product</button>
<button type="button" class="btn btn-solid add-to-cart" …推荐指数
解决办法
查看次数
angular是否有任何方法来计划dom的度量和变异？
我创建了一个Angular问题：https : //github.com/angular/angular/issues/20471
也在gist中启动了一项提案：https : //gist.github.com/matthewharwood/23ea18c8509b8056813d3c3e7df0d1b2
嘿，我在
Angular / cdk指令之外搞砸了，该指令在ngZones 和之外工作@angular/animations。我想知道您是否可以告诉我是否考虑了特定的布局颠簸优化？我提高性能的秘密武器一直是使用fastdom库来实现视差滚动等效果。我尚未测试性能，因为我感觉到角度已经有类似太快的方法，我只是不知道。
问题： Angular是否有任何方法来计划DOM的度量和变异？如果是这样，怎么办？如果不是，将快节奏实现到cdk和动画之类的库中是否明智？如果再次如此，您能给我一些例子来帮助我更好地与角度小组沟通吗？
无论如何，描述问题有点难以解释。但是，让我们看一下频率，然后我将调整角度。
Fastdom的工作方式如下：
fastdom.measure(() => {
console.log('measure');
});
fastdom.mutate(() => {
console.log('mutate');
});
fastdom.measure(() => {
console.log('measure');
});
fastdom.mutate(() => {
console.log('mutate');
});
将输出：
measure
measure
mutate
mutate
查看cdk时：https : //sourcegraph.com/github.com/angular/material2@master/-/blob/src/cdk/scrolling/scrollable.ts
除非是ngZones，否则似乎没有措施包装。
ngOnInit() {
this._scrollListener = this._ngZone.runOutsideAngular(() => {
return this._renderer.listen(this.getElementRef().nativeElement, 'scroll', (event: Event) => {
this._elementScrolled.next(event);
});
});
this._scroll.register(this);
}
测试用例：假设您在页面上有一个元素，该元素可以根据当前滚动位置进行翻译。
您可以通过以下方式实现此功能：（伪代码）
// index.html
<body …推荐指数
解决办法
查看次数
角度-如何定义动画参数默认值？
我正在使用Angular动画，并且要改善我的动画，我需要使用参数。要做到这一点，我也为这个答案建议，用插值。
这是我对状态的要求：
state('position', style({ transform: 'translateX({{translate_X}}) translateY({{translate_Y}}) skewX({{skew_X}}) skewY({{skew_Y}})' }))
component.html
<div class="iris" [@move]="{value: triggerValue, params: {translate_X: translate_X, translate_Y: translate_Y, skew_X: skew_X, skew_Y: skew_Y}}"></div>
这是我无法解决的错误：
错误错误：由于以下错误，动画触发器“ move”构建失败：-state（“ position”，...）必须为以下所有样式替换定义默认值：InjectableAnimationEngine上的translation_X，translate_Y，skew_X，skew_Y .AnimationEngine.registerTrigger（...）
那么我们应该在哪里以及如何定义Angular动画参数的默认值呢？
推荐指数
解决办法
查看次数
Angular 5 Stagger动画 - 如何进行逆序
在使用Angular CDK并开发自定义组件时,我正在尝试用ngIf和实现交错动画ngFor.动画是一系列简单的淡入.
以下简化的HTML:
<button (click)="visible = !visible">Toggle</button>
<div class="parent" @parentAnimation *ngIf="visible">
<p class="child">Child 1</p>
<p class="child">Child 2</p>
<p class="child">Child 3</p>
</div>
和组件:
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
animations: [
trigger('parentAnimation', [
transition('void => *', [
query('.child', style({opacity: 0})),
query('.child', stagger('500ms', [
animate('100ms .1s ease-out', style({opacity: 1}))
]))
]),
transition('* => void', [
query('.child', style({opacity: 1})),
query('.child', stagger('500ms', [
animate('100ms .1s ease-out', style({opacity: 0}))
]))
])
])
]
})
export class AppComponent { …推荐指数
解决办法
查看次数
如何将动画绑定到内容子项并订阅动画事件？
我正在开发一个采用内部内容的 Angular 组件，并且应该将动画附加到内容子项（例如子元素）。
使用代码如下所示：
<flip-board [frontSide]="'side-2'">
<flip-side name="side-1">Side 1<flip-side>
<flip-side name="side-2">Side 2<flip-side>
<flip-side name="side-3">Side 3<flip-side>
</flip-board>
在FlipBoard组件内部，我需要：
- 将动画附加到所有
FlipSide组件。 - 收听 的动画事件
FlipSide。
在所有文章和教程中，我发现它展示了如何在模板中而不是在组件代码中附加动画和事件。在我的情况下，模板由组件的使用者传递，我需要在组件代码中动态分配动画和订阅动画事件。
@Component({
selector: 'flip-board',
template: '<ng-content></ng-content>',
})
export class FlipBoard {
@ContentChildren(FlipSide) sides: QueryList<FlipSide>;
ngAfterContentInit() {
// TODO: 1. Attach animations to this.sides
// TODO: 2. Subscribe to animation events of this.sides
}
}
是否可以？
推荐指数
解决办法
查看次数
特定项目的角度页面过渡动画
我想进行路线过渡，但不是简单的滑出/滑入动画。我正在寻找左边这样的动画（https://cdn.dribbble.com/users/495792/screenshots/3847874/allshots3.gif）
我知道如何为将重绘整个内容的路线设置动画。但是我怎样才能通过改变路线实现一个/多个组件转换到另一个组件的效果（左侧的这种放大/缩放效果）。
我将不胜感激任何建议或指导在哪里寻找一些示例代码。
angular-routing angular-transitions angular angular-animations angular-router
推荐指数
解决办法
查看次数
Angular 7动画在Webkit浏览器上导致z-index重叠问题
我在我的angular 7应用程序中添加了一些交错动画，以使元素在页面加载时进行动画处理。我在我的一个组件上遇到了这个奇怪的z-index问题。
动画代码是这样的：
@Component({
selector: 'track-page',
templateUrl: './track-page.component.html',
styleUrls: ['./track-page.component.scss'],
animations: [
trigger('fadeIn', [
transition(':enter', [
query('*', style({opacity: 0})),
query('*', [
animate('500ms', style({opacity: 1}))
]),
])
]),
trigger('swipeUp', [
transition('void => *', [
query('*', style({opacity: 0, transform: 'translate3d(0,20%,0)'})),
query('*', stagger(10, [
animate('700ms ease-in', keyframes([
style({opacity: 1, transform: 'none', offset: 1})
]))
]))
])
])
]
})
此代码仅在webkit浏览器上导致以下结果：
共享组件应该出现在所有其他元素的前面，但是节拍器图标出现在顶部。我尝试在共享组件上设置最大z-index，但是没有运气。
推荐指数
解决办法
查看次数
是否可以为 mat-tree 设置动画？（角材料）
我正在使用来自 Angular Materials 的mat-tree ( https://material.angular.io/components/tree/overview )。在扩展父树节点时，我想为子树节点的出现和消失设置动画。这是我希望动画如何的一个例子：
我知道 Angular 提供了反动画功能，但我还没有找到如何为 mat-tree 设置动画。
是否可以为 Angular Material 的 mat-tree 设置动画？或者如果我想要那种动画，我是否被迫编写自己的树形菜单？
推荐指数
解决办法
查看次数
是否可以在组件/元素的 ':enter' 或 ':leave' 事件上添加 CSS 类，例如与 Angular 10 中的动画一起使用？
使用 Angular Animations 可以在元素及其子元素进入或离开视图时向它们添加过渡/动画，如下所示：
@Component({
animations: [
trigger('containerTrigger', [
transition(':enter', [
style({ opacity: 0, transform: 'translateY(-10px)' }),
animate('250ms 100ms', style({ opacity: 1, transform: 'none' })),
]),
]),
]
})
虽然这工作正常，但当向所选元素及其子元素添加更复杂的过渡/动画时，它会很快变得复杂。
同样对于主要在项目中维护 CSS 的人来说，可能很难习惯 Angular 的动画语法。然后更容易阅读和维护这样的 CSS：
.container {
opacity: 0;
&.is-active {
opacity: 1;
transition: all 0.2s linear;
}
}
.container__heading {
transform: translateX(-10px);
.container.is-active & {
transform: none;
transition: all 0.2s linear;
}
}
问题：是否可以在:enter和:leave事件上添加 CSS 类而不是运行 Angular 动画？
推荐指数
解决办法
查看次数
标签 统计
angular ×10
javascript ×3
angular5 ×1
animation ×1
css ×1
dom ×1
performance ×1
tree ×1
typescript ×1