角: group()函数不并行运行动画，破坏动画流
角: group()函数不并行运行动画，破坏动画流
提问于 2019-04-05 11:51:52
为了练习，我尝试用角度动画来实现此登录表单。
我希望十字旋转，而圆移动到中间。所以我需要移动和交叉旋转同时发生。
我尝试为由同一个变量触发的交叉创建第二个动画。第二个动画没有被渲染，因为它是一个innerElement，并且父动画显然阻止了这一点。然后我试着在动画中做一个小组，在那里运动和旋转应该是并行的。但这会导致下面的动画不再是“动画”，而只是跳过动画结果。
我创建了一个堆栈闪电战，整个动画都是链接
这是动画，它现在是如何工作，没有旋转。注释部分是我试图做的，而不是第一个animate函数。
trigger('circle', [
state('closed', style({
height: `${BUTTON_WIDTH}px`,
width: `${BUTTON_WIDTH}px`,
background: BUTTON_COLOR,
borderRadius: `${BUTTON_WIDTH / 2}px`,
position: 'absolute',
top: `${BUTTON_TOP_DISPLACEMENT}px`,
right: `${-BUTTON_WIDTH / 2}px`
})),
state('open', style({
height: '100%',
width: '100%',
background: BUTTON_COLOR,
borderRadius: '0',
position: 'absolute',
top: '0px',
right: '0px'
})),
transition('closed => open', [
// group([
// animate('300ms ease-out', style({
// top: `calc(50% - ${BUTTON_WIDTH / 2}px)`,
// right: `calc(50% - ${BUTTON_WIDTH / 2}px)`
// })),
// query('a.cross', animate('300ms ease-out', style({
// transform: 'rotate(45deg)'
// })))
// ]),
animate('300ms ease-out', style({
top: `calc(50% - ${BUTTON_WIDTH / 2}px)`,
right: `calc(50% - ${BUTTON_WIDTH / 2}px)`
})),
animate('200ms ease-in', style({
height: `${CONTAINER_WIDTH}px`,
width: `${CONTAINER_WIDTH}px`,
borderRadius: `${CONTAINER_WIDTH / 2}px`,
position: 'absolute',
top: `${(CONTAINER_HEIGHT - CONTAINER_WIDTH) / 2}px`,
right: '0px'
})),
animate('150ms ease-out')
])
])当我把动画放在一个组中时，它不应该影响它之后的动画，而应该并行运行一些东西，但不知怎么的，它是这样的。我用错小组了吗？或者这是已知的行为
编辑：通过在动画中使用keyframes()，而不是使用多个animate()函数，而是使用一个有多个步骤的动画函数，解决了这个问题。在组中没有一系列的动画功能就解决了这个问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-04-06 05:21:46
我把你的闪电战通过做出改变通过ngClass.
在login.component.css中
a.crossTilt{
animation: slowRotateToCross 800ms ease-in;
transform: rotate(45deg);
}
@keyframes slowRotateToCross{
from { transform: rotate(0deg); }
to { transform: rotate(45deg); }
}在login.component.html中
<div class="container">
<div [@circle]="isOpen ? 'open' : 'closed'" (click)="toggle()">
<a href="#" class="cross" [ngClass]="isOpen ? 'crossTilt' : ''" ></a>
</div>
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55534769
复制相关文章
相似问题
腾讯云开发者
