Question

基本上，我想在角度（当前为4）中使用web-animations-api polyfill来对元素执行无限动画。

让我们看一个基本的非角度示例：

＆＃13;

var ball = document.getElementById('ball');

ball.animate([
  { transform: 'scale(0.5)' },
  { transform: 'scale(1)' }
], {
  duration: 1000,
  iterations: Infinity,
  direction: 'alternate',
  easing: 'ease-in-out'
});

＆＃13;

.container {
  position: relative;
  width: 100%;
  height: 200px;
}

.ball {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid #E57373;
  background: #F06292;
  box-shadow: 0px 0px 15px #F06292;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script>
<div class="container">
  <div class="ball" id="ball"><div>
</div>

＆＃13;

如何将其转换为Angular？

这是我迄今为止尝试过的，但只能使用一次：

animations: [
  trigger('scale', [
    transition('* <=> *', animate('1s ease-in-out', keyframes([
      style({ transform: 'scale(0.5)' }),
      style({ transform: 'scale(1)' })
    ]))) // How do I specify the iterations, or the direction? 
  ])
]

有没有办法用@ angular / animation插件代替存储ElementRef并像上面的例子那样做？或者我误解了这个插件的用途是什么？

提前致谢。

Answer 1

我正在为我的项目搜索无限动画。 angular.io中没有相关文档。所以我尝试了这种方式并花了我很多时间来实现这一目标。希望它会帮助别人。首先在animation中定义class。

animations: [
trigger('move', [
  state('in', style({transform: 'translateX(0)'})),
  state('out', style({transform: 'translateX(100%)'})),
  transition('in => out', animate('5s linear')),
  transition('out => in', animate('5s linear'))
]),
]

然后将其插入html

<div [@move]="state" (@move.done)="onEnd($event)"></div>

然后设置state = 'in'并在ngAfterViewInit()生命周期挂钩中，使用state函数更新'out'属性值setTimeout，并在结束回调函数后更新您的{将{1}}属性值转换为state并检查您的'in'属性值，如果state然后通过in函数更新为out

setTimeout

快乐编码：）

Answer 2

可以实现Angular中的无限动画，但是动画效果不高，但这对我来说效果很好 onenter和onleave动画。

当“ mouseenter”动画循环播放时，它会在“ mouseleave”上停止播放。

我正在使用Angular 6。

Angular CLI：6.0.8 节点：8.9.3 操作系统：Linux x64 角度：6.1.4 ...动画，通用，编译器，compiler-cli，核心，形式 ... http，语言服务，平台浏览器 ...平台浏览器动态，路由器

rxjs 6.2.2 打字稿2.7.2 webpack 4.8.3

import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

@Component({
  selector: 'hot-spot',
  templateUrl: './myComp.component.html',
  styleUrls: ['./myComp.component.css'],
  animations: [
    trigger('compState', [
      state('small', style({
        opacity: '0.5',
        transform: 'scale(0.8)'
      })),
      state('large', style({
        opacity: '1',
        transform: 'scale(1.2)'
      })),
      transition('small => large', animate('0.6s 100ms ease-in')),
      transition('large => small', animate('0.7s 100ms ease-out'))
    ]),
  ]
})
export class MyComponent {

  state: string = 'none';
  isEnter: boolean = false;


  onMouseEnter(evt: MouseEvent) {
    console.log('onMouseEnter()');
    this.state = 'small';
    this.isEnter = true;
  }

  onMouseLeave(evt: MouseEvent) {
    console.log('onMouseLeave()');
    this.state = 'large';
    this.isEnter = false;
  }

  onEnd(event) {
    if (this.isEnter) {
      if (event.toState === 'small') {
        this.state = 'large';
      }
      else {
        this.state = 'small';
      }
    }
  }

}

和HTML

<div
  (mouseenter)="onMouseEnter($event)"
  (mouseleave)="onMouseLeave($event)">

  <div>
    <div
      [@compState]="state"
      (@compState.done)="onEnd($event)">

      <button
        (click)="onSceneClick($event,data.sceneId)"
        type="button"
        class="btn btn-link" >
        <i class="fa fa-angle-double-up" style="font-size:16pt;color:red">
          <br><span style="font-size:12pt">{{data.text}}</span>
        </i>

      </button>
    </div>
  </div>

Answer 3

您可以尝试 WebComponents 以声明方式使用 Web动画API （通过使用组件对任何html元素进行动画处理）：

SELECT   c01.car_no, c01.refno,
         NVL ((SELECT dept_desc
                 FROM emp_dept
                WHERE deptcode = c01.deptid), ' ') AS deptid, c01.err_proof,
         NVL ((SELECT sectionname
                 FROM iqa_section
                WHERE sectionid = areaid), ' ') AS areaid,
         NVL (TO_CHAR (auditdate, 'YYYY-MM-DD'), 'N') AS auditdate,
         issuedto AS issuedtoid,
         NVL ((SELECT NAME
                 FROM tqm_vwemployee
                WHERE emp_number = issuedto),
              NVL (issuedto, ' ')) AS issuedto,
         NVL (TO_CHAR (issueddate, 'YYYY-MM-DD'), 'N') AS issueddate,
         NVL (TO_CHAR (closeddate, 'YYYY-MM-DD'), 'N') AS closeddate,
         conformity, rfi, fid,
         NVL ((SELECT NAME
                 FROM tqm_vwemployee
                WHERE emp_number = aguideid),
              NVL (aguideid, ' ')) AS aguideid,
         NVL ((SELECT NAME
                 FROM tqm_vwemployee
                WHERE emp_number = qmid), ' ') AS qmid,
         NVL ((SELECT NAME
                 FROM tqm_vwemployee
                WHERE emp_number = auditorid), ' ') AS auditorid,
         NVL ((SELECT NAME
                 FROM tqm_vwemployee
                WHERE emp_number = lotheadid),
              NVL (lotheadid, ' ')
             ) AS lotheadid,
         NVL ((SELECT NAME
                 FROM tqm_vwemployee
                WHERE emp_number = elotheadid), ' ') AS elotheadid,
         NVL ((SELECT NAME
                 FROM tqm_vwemployee
                WHERE emp_number = verifierid),
              NVL (verifierid, '')
             ) AS verifierid,
         NVL ((SELECT NAME
                 FROM tqm_vwemployee
                WHERE emp_number = ebfg), ' ') AS ebfg,
         NVL (TO_CHAR (target_date, 'YYYY-MM-DD'), 'N') AS target_date,
         NVL (car_verification1, ' ') car_verification1,
         NVL (car_verification2, ' ') car_verification2,
         NVL (TO_CHAR (car_d1_recommitdate, 'YYYY-MM-DD'),
              'N'
             ) AS car_d1_recommitdate,
         NVL (TO_CHAR (car_d2_recommitdate, 'YYYY-MM-DD'),
              'N'
             ) AS car_d2_recommitdate,
         NVL (findingsdesc, ' ') findingsdesc,
         NVL (bfgsection, ' ') bfgsection, NVL (areasection, ' ') areasection,
         NVL (TO_CHAR (nca_date, 'YYYY-MM-DD'), 'N') AS nca_date,
         NVL (TO_CHAR (ncq_date, 'YYYY-MM-DD'), 'N') AS ncq_date,
         NVL (TO_CHAR (prl_date, 'YYYY-MM-DD'), 'N') AS prl_date,
         NVL (TO_CHAR (prao_date, 'YYYY-MM-DD'), 'N') AS prao_date,
         NVL (TO_CHAR (prq_date, 'YYYY-MM-DD'), 'N') AS prq_date,
         NVL (TO_CHAR (vca_date, 'YYYY-MM-DD'), 'N') AS vca_date,
         NVL (TO_CHAR (ver_date, 'YYYY-MM-DD'), 'N') AS ver_date, nca_tag,
         ncq_tag, prl_tag, prao_tag, prq_tag, pra_tag, vcaf_tag, ver_tag,
         NVL ((SELECT NAME
                 FROM tqm_vwemployee
                WHERE emp_number = aownerid),
              NVL (aownerid, ' ')) AS aownerid, aownerid AS ownerid,
         NVL (points, ' ') points, NVL (interim, ' ') interim,
         NVL (rca, ' ') rca, NVL (corrective, ' ') corrective, show_tag,
         tempapprover.current_approver current_approver,
         NVL (remarks, ' ') remarks
    FROM iqa_car c01,
         (SELECT c02.car_no,
                 DECODE (a01.app_desc,
                         'AUDITORID', (SELECT NAME
                                         FROM tqm_vwemployee
                                        WHERE emp_number = c02.auditorid),
                         'QMID', (SELECT NAME
                                    FROM tqm_vwemployee
                                   WHERE emp_number = c02.qmid),
                         'VERIFIERID', (SELECT NAME
                                          FROM tqm_vwemployee
                                         WHERE emp_number = c02.verifierid),
                         'LOTHEADID', (SELECT NAME
                                         FROM tqm_vwemployee
                                        WHERE emp_number = c02.lotheadid),
                         'AOWNERID', (SELECT NAME
                                        FROM tqm_vwemployee
                                       WHERE emp_number = c02.aownerid),
                         NULL, 'N'
                        ) current_approver
            FROM iqa_car c02, iqa_approval a01, iqa_tracker t01
           WHERE c02.car_no = t01.refno AND a01.app_no = t01.app_no) tempapprover
   WHERE tempapprover.car_no(+) = c01.car_no AND show_tag = 1
         AND ab_getaudittypeid (deptid) = 11
ORDER BY c01.car_no DESC

有很多定义的动画，但是您也可以使用keyFrames创建自定义动画。

选中此处以与 Angular ， React ， VueJS 等一起使用：https://github.com/proyecto26/animatable-component#framework-integrations

如何在Angular 2中执行无限动画？

3 个答案: