CSS关键帧动画优雅完成

我有一个旋转的图标的动画。

enter image description here

它可能在任何意想不到的时间完成。

所以我的问题是:有什么方法可以在停止旋转之前,用纯CSS来完成它的结束关键帧?有什么方法可以在停止旋转之前,使用纯CSS来完成它的结束关键帧?

我现在就有这样的代码。

我试过过渡,但效果不好


.loop {
  transition: 400ms;
  transform: rotate(180deg);

  &:hover {
    animation: rotation 400ms infinite linear;
  }
}

@keyframes rotation {
  from {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(0deg);
  }
}

解决方案:

我写了这个指令,它的工作原理和我预期的一样。

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>

它的工作原理是这样的。

enter image description here

这不是CSS的解决方案。

本文来自投稿,不代表实战宝典立场,如若转载,请注明出处:https://www.shizhanbaodian.com/40400.html

(0)
上一篇 20小时前
下一篇 20小时前

相关推荐

发表评论

登录后才能评论