基本上,我想利用 angular 中的 web-animations-api polyfill(目前为 4 个)对元素执行无限动画。
让我们看一个基本的非角度示例:
var ball = document.getElementById('ball');
ball.animate([
{ transform: 'scale(0.5)' },
{ transform: 'scale(1)' }
], {
duration: 1000,
iterations: Infinity,
direction: 'alternate',
easing: 'ease-in-out'
});
.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;
}
<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>
我如何将其翻译成 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 并按照上面的示例进行操作?或者我误解了这个插件的用途?
提前致谢。