![](/img/trans.png)
[英]Angular 2 Perform Login Authentication (i am getting into infinite loop.)
[英]How do I perform infinite animations in Angular 2?
基本上,我想使用 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 并像上面的例子那样做? 或者我误解了这个插件的用途?
提前致谢。
我正在为我的项目寻找无限动画。 angular.io
没有这方面的angular.io
。 所以我尝试了这种方式并花费了我很多时间来实现这一目标。 希望它能帮助别人。 首先在class
定义animation
。
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()
生命周期钩子中,使用setTimeout
函数更新您的state
属性值'out'
,并在结束回调函数后,将您的state
属性值更新为'in'
并检查您的state
属性值,如果in
然后像这样通过setTimeout
函数更新为out
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 打字稿 2.7.2 网络包 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>
您可以尝试使用WebComponents以声明方式使用Web Animations API (通过使用组件对任何 html 元素进行动画处理):
<!-- Add Web Animations Polyfill :) --> <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"></script> <script type="module" src="https://unpkg.com/@proyecto26/animatable-component@1.0.0/dist/animatable-component/animatable-component.esm.js"></script> <script nomodule="" src="https://unpkg.com/@proyecto26/animatable-component@1.0.0/dist/animatable-component/animatable-component.js"></script> <animatable-component autoplay easing="ease-in-out" duration="800" delay="300" animation="zoomIn" iterations="Infinity" direction="alternate" style="display: flex;align-self: center;" > <h1>Hello World</h1> </animatable-component>
有很多定义的动画,但您也可以使用关键帧创建自定义动画。
在此处检查以将其与Angular 、 React 、 VueJS等一起使用: https : //github.com/proyecto26/animatable-component#framework-integrations
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.