我希望能够通过单击按钮在一个方向或另一个方向上无限翻转一个对象。动画的灵感来自于这个例子:http://www.vishmax.com/en/labs/css-vertical-flip-animation-code-with-demo/
代码:https://codesandbox.io/s/angular-wkbb5?fontsize=14
这是我的模板:
<div class="outer">
<div class="front" [@frontFlipAnim]="flip">
<img src="http://vishmax.com/demos/images/front.png">
</div>
<div class="back" [@backFlipAnim]="flip">
<img src="http://vishmax.com/demos/images/back.png">
</div>
</div>
<button (click)="toggleFlip()">Flip</button>
我的 CSS:
.outer {
margin-left: 200px;
}
.outer div {
transition: all .6s;
position: absolute;
}
.outer div img {
width: 200px;
}
.front {
z-index: 999;
}
.back {
z-index: -999;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
transform: rotateX(180deg);
}
和我的组件:
import { Component, OnInit } from '@angular/core';
import { trigger, style, state, transition, group, animate } from '@angular/animations';
@Component({
selector: 'flip',
templateUrl: './flip.component.html',
styleUrls: ['./flip.component.scss'],
animations: [
trigger('frontFlipAnim', [
state('up', style({
transform: 'rotateX(-180deg)',
zIndex: -999
})),
state('down', style({
transform: 'rotateX(0deg)',
zIndex: 999
})),
transition('up => down', animate('400ms ease-out')),
transition('down => up', animate('400ms ease-in'))
]),
trigger('backFlipAnim', [
state('up', style({
transform: 'rotateX(0deg)',
zIndex: 999
})),
state('down', style({
transform: 'rotateX(180deg)',
zIndex: -999
})),
transition('up => down', animate('400ms ease-out')),
transition('down => up', animate('400ms ease-in'))
])
]
})
export class FlipComponent implements OnInit {
flip: string;
constructor() {
this.flip = 'up';
}
ngOnInit() {
}
toggleFlip() {
this.flip = (this.flip === 'up') ? 'down' : 'up';
}
}
在这个例子中,我只能上下翻转,而不能像翻转计数器那样无限向上或无限向下翻转。
最佳答案
可以尝试ElementRef、ViewChild、Renderer2实现一个方向的无限翻转,而不是Angular Animation。您可以在下面找到工作代码。我希望这就是您所期待的。如果有任何问题或您的要求完全不同,请告诉我。
CSS
.outer {
margin-left: 200px;
width: 275px;
height: 475px;
-webkit-perspective: 900;
}
.outer div {
width: 275px;
height: 475px;
transition: all 0.6s;
position: absolute;
}
.front {
z-index: 999;
}
.back {
z-index: -999;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
HTML
<button (click)="toggleFlip()">Flip</button>
<div class="outer">
<div #frontDiv class="front">
<img src="https://vishmax.com/demos/images/front.png" />
</div>
<div class="back" #backDiv>
<img src="https://vishmax.com/demos/images/back.png" />
</div>
</div>
函数
toggleFlip() {
this.transformFront += 180;
this.transformBack += 180;
this.renderer.setStyle(
this.front.nativeElement,
"-webkit-transform",
`rotateX(${this.transformFront}deg)`
);
this.renderer.setStyle(
this.back.nativeElement,
"-webkit-transform",
`rotateX(${this.transformBack}deg)`
);
if (this.flip === "up") {
this.renderer.setStyle(this.back.nativeElement, "z-index", "999");
this.renderer.setStyle(this.front.nativeElement, "z-index", "-999");
this.flip = "down";
} else {
this.renderer.setStyle(this.front.nativeElement, "z-index", "999");
this.renderer.setStyle(this.back.nativeElement, "z-index", "-999");
this.flip = "up";
}
}
app.component.ts
import { Component, ElementRef, ViewChild, Renderer2 } from "@angular/core";
@Component({
selector: "app-root",
template: `
<button (click)="toggleFlip()">Flip</button>
<div class="outer">
<div #frontDiv class="front">
<img src="https://vishmax.com/demos/images/front.png" />
</div>
<div class="back" #backDiv>
<img src="https://vishmax.com/demos/images/back.png" />
</div>
</div>
`,
styles: [
`
.outer {
margin-left: 200px;
width: 275px;
height: 475px;
-webkit-perspective: 900;
}
.outer div {
width: 275px;
height: 475px;
transition: all 0.6s;
position: absolute;
}
.front {
z-index: 999;
}
.back {
z-index: -999;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
}
`
]
})
export class AppComponent {
flip: string;
hoverState = false;
transformFront = 0;
transformBack = 180;
@ViewChild("frontDiv") front: ElementRef;
@ViewChild("backDiv") back: ElementRef;
constructor(private el: ElementRef, private renderer: Renderer2) {
this.flip = "up";
}
toggleFlip() {
this.transformFront += 180;
this.transformBack += 180;
this.renderer.setStyle(
this.front.nativeElement,
"-webkit-transform",
`rotateX(${this.transformFront}deg)`
);
this.renderer.setStyle(
this.back.nativeElement,
"-webkit-transform",
`rotateX(${this.transformBack}deg)`
);
if (this.flip === "up") {
this.renderer.setStyle(this.back.nativeElement, "z-index", "999");
this.renderer.setStyle(this.front.nativeElement, "z-index", "-999");
this.flip = "down";
} else {
this.renderer.setStyle(this.front.nativeElement, "z-index", "999");
this.renderer.setStyle(this.back.nativeElement, "z-index", "-999");
this.flip = "up";
}
}
}
关于css - 如何在 Angular 中进行无限翻转?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58762765/