如何将动画从Angular切换到css

Question

我有一个渐变/淡出动画使用@angular/animation工作完美，但我需要把这个动画传递给css，并把这个依赖于@angular/animation

我的动画(我只是通过[@fadeInOut]属性在我的div和它的工作):

animations: [
trigger('fadeInOut', [
state(
'void',
style({
opacity: 0
})
),
transition('void <=> *', animate(300))
])
]

我试着在CSS中这样做，但它不起作用:

.fadeinout{
animation: fade 0.3s linear forwards;
}
@keyframes icon-fade-in-out {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

Answer 1

你应该使用关键帧和webkit关键帧以防浏览器不支持它。我喜欢在我的上创建20个台阶，因为我认为它看起来更干净，在渐入渐变时不那么跳跃。

.fade-in {
-webkit-animation: fade-in .8s steps(20, end) both;
animation: fade-in .8s steps(20, end) both;
}
@-webkit-keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

你可以在这里阅读:

https://css-tricks.com/snippets/css/keyframe-animation-syntax/

在你的功能，你可以使用renderer2 -在回应你的评论，这就是我们如何做到这一点，它的工作原理。我本可以把这些类组合在一起，但我们是单独测试每个类，以确保它们及时有序地注入Dom。

const loading= document.getElementById('loading');
const signinElement = document.getElementById('signinelement');
this.renderer.removeClass(signinElement, 'show');
this.renderer.removeClass(signinElement, 'fade-in');
this.renderer.removeClass(loading, 'hidden');
this.renderer.addClass(signinElement, 'hidden');
this.renderer.addClass(signinElement, 'fade-out');
this.renderer.addClass(loading, 'show');
this.renderer.addClass(loading, 'fade-in');
setTimeout(()=>{


// this.renderer.addClass(signinElement, 'show');
// this.renderer.addClass(signinElement, 'fade-in');

setTimeout(()=>{
this.signin.googleSignin();
}, 500)

}, 500)