基本上,我想在角度(当前为4)中使用web-animations-api polyfill来对元素执行无限动画。
让我们看一个基本的非角度示例:
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并将其作为上面的示例?或者我误解了这个插件的用途?
提前致谢。
我正在为我的项目搜索无限动画。在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
,并在结束回调函数后,将你的state
属性值更新到'in'
并检查你的state
属性值,如果in
然后通过out
函数更新到setTimeout
这样的功能
export class AppComponent implements AfterViewInit {
state = 'in';
ngAfterViewInit() {
setTimeout(() => {
this.state = 'out';
}, 0);
}
onEnd(event) {
this.state = 'in';
if (event.toState === 'in') {
setTimeout(() => {
this.state = 'out';
}, 0);
}
}
}
快乐编码:)
Angular中的无限动画可以实现,并没有太大的内容,但这对我来说很适合onenter和onleave动画。
当'mouseenter'动画以循环播放时,它会在'mouseleave'上停止。
我正在使用Angular 6。
Angular CLI:6.0.8节点:8.9.3操作系统:linux x64 Angular:6.1.4 ...动画,通用,编译器,编译器 - cli,核心,表单... http,语言服务,平台浏览器..平台浏览器动态,路由器
rxjs 6.2.2 typescript 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>