我有旋转的图标动画。
可能在任何意外的时间结束。
所以我的问题是。有什么方法可以使用纯CSS在停止旋转之前将其完成到结束关键帧吗?
我现在有以下代码:
我确实尝试了过渡,但没有任何好结果:
.loop {
transition: 400ms;
transform: rotate(180deg);
&:hover {
animation: rotation 400ms infinite linear;
}
}
@keyframes rotation {
from {
transform: rotate(180deg);
}
to {
transform: rotate(0deg);
}
}
答案 0 :(得分:0)
我写了这个指令,可以正常使用。
import { Directive, ElementRef, Input } from '@angular/core';
@Directive({
selector: '[appRotate]'
})
export class RotateDirective {
speedQueue: Array<number>= [];
_speed = 0;
@Input('appRotate') set speed(value: number = 0) {
const steps = 5;
const step = (value - this._speed) / steps;
this.speedQueue = new Array(steps).fill(0).map((_, i) => (i+1) * step + this._speed);
}
constructor(private el: ElementRef) {
let rot = 0;
const loop = () => {
if (this.speedQueue.length) {
this._speed = this.speedQueue.shift();
}
rot += this._speed * 360;
this.el.nativeElement.style.transform = `rotate(${rot % 360}deg) scaleX(-1)`;
requestAnimationFrame(loop);
};
requestAnimationFrame(loop);
}
}
<span class="material-icons loop" [appRotate]="speed">
loop
</span>
<div>
<input type="radio" name="speed" (click)="speed=0">0
<input type="radio" name="speed" (click)="speed=0.02">2%
<input type="radio" name="speed" (click)="speed=0.08">8%
</div>
它是这样的:
这不是CSS解决方案。