我在Component中使用Angular动画创建了一个Angular npm库,但是用户想要自定义它们。
假设我有以下Angular 5+组件(from Angular docs):
@Component({
selector: 'app-hero',
template: `
template code here...
`,
styleUrls: ['./hero-list.component.css'],
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'))
])
]
})
export class HeroListBasicComponent {
@Input() heroes: Hero[];
}
如上例所示,animations
在@Component
装饰器内设置。
我想知道是否可以将自定义animations
数组传递给元素,以使其使用不同的动画,具体取决于传递给元素实例的动画(无论如何实现): / p>
目前,实际的Angular可能无法实现吗?
答案 0 :(得分:1)
这不会以一种常见的方式回答这个问题,但它可以帮助你解决这个特殊的问题+我要写的东西太大而无法发表评论>>我会将其作为答案发布。
如果我们在这里讨论的唯一内容是用于显示模态的动画,我会切换到标准的CSS动画。
它们易于编写(至少根据我的口味,它们比角形更简单)并且易于扩展。您可以为用户提供完全的自由:他们可以通过为您提供几个CSS类来配置他们想要的动画。
要快乐的步骤:
initial-state
的班级transform: scale(0)
和一些包含过渡逻辑的班级,让我们说transition-definition
。setTimeout
或部分rxjs
超时)。这样做的唯一原因是让浏览器将你的模态缩放为0.在超时的回调中你删除initial-state
类并在你的模态上指定另一个类,它给你另一个状态,让&# 39;用target-state
说transform: scale(1)
课。只要您超时执行该类,CSS引擎就会识别出已使用transform
的新属性更新了已呈现的元素。这就是为什么它会从0开始缩放到1来开始转换。
您应该关注的唯一问题可能是在Angular区域之外创建超时,因为它仅用于动画目的而不会更改应用程序状态。这将为人类节省一些电力。
最后,您的用户可以为您提供与
类似的任何动画.initial-state {
transform: scale(0);
}
.transition-definition {
transition: transform .2s
}
.target-state {
transform: scale(1);
}
只提供几个CSS类。
我想如果你将转换逻辑放入目标状态(需要验证),即使有2个类就足够了。
答案 1 :(得分:0)
可以像下面这样做
<强> router.animations.ts 强>
import { animate, state, style, transition, trigger } from '@angular/animations';
export function routerTransition() {
return slideToTop();
}
export function slideToTop() {
return trigger('routerTransition', [
state('void', style({})),
state('*', style({})),
transition(':enter', [
style({ transform: 'translateY(100%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateY(0%)'}))
]),
transition(':leave', [
style({ transform: 'translateY(0%)' }),
animate('0.5s ease-in-out', style({ transform: 'translateY(-100%)' }))
])
]);
}
在组件
中 import { routerTransition } from './router.animations';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss'],
animations: [routerTransition()]
})
我希望它会对你有所帮助。
修改:忘记添加HTML代码
在component.html的父节点中:
<div class="component-page" [@routerTransition]>
<!-- Component layout -->
</div>