【发布时间】：2018-11-24 00:14:54
【问题描述】：
在 Angular 5 中工作。尝试从头开始创建轮播式图像浏览器。用户可以单击/滑动查看下一张或上一张图像。
:enter 类型的动画效果很好（在我的代码中显示为"void => next" 和"void => prev"）。但是，"next => void" 和 "prev => void" 动画转换不会发生。
网络上的每个答案似乎都围绕子组件，为元素display: block 制作样式，并在更改状态后调用detectChanges()。这不是子组件场景，我已经将 "display: block" css 分配给元素，甚至将其包含在动画样式中，并且我确保在状态更改后立即添加 detectChanges() .这些都没有奏效。
我在某处的评论中读到，detectChanges() 不再为 :leaving 动画解决问题。他们的解决方法是将用于从 DOM 中删除元素的代码包装在 setTimeout() 回调中。 即使这样也没有用。
到了我只是从https://github.com/born2net/Angular-kitchen-sink/blob/master/src/comps/app2/notes/AnimateCards.ts 复制/粘贴整个代码块的地步，只更改了变量名。但即使这样也没有用！
这让我脱发。请帮帮我。
组件（打字稿中的 Angular 5）
import { Component, OnInit, ChangeDetectorRef, ElementRef, ViewChild } from '@angular/core';
import { trigger, transition, style, animate, keyframes } from '@angular/animations';
type Orientation = ('prev' | 'next' | 'none');
@Component({
selector: 'app-album-browser',
templateUrl: './album-browser.component.html',
styleUrls: ['./album-browser.component.scss'],
animations: [
trigger('animateCarousel',
[
transition('prev => void', // ------> leaving ------->
[
animate('500ms ease-in-out', keyframes([
style({ opacity: 1.0, left: 0 }),
style({ opacity: 0.0, left: 200 })
]))
]),
transition('void => prev', // ----> entering ---->
[
animate('500ms ease-in-out', keyframes([
style({ opacity: 0.0, left: -200, zIndex: 2 }),
style({ opacity: 1.0, left: 0, zIndex: 2 })
]))
]),
transition('next => void', // <------- leaving <-------
[
animate('500ms ease-in-out', keyframes([
style({ opacity: 1.0, right: 0 }),
style({ opacity: 0.0, right: 200 })
]))
]),
transition('void => next', // <------- entering <--------
[
animate('500ms ease-in-out', keyframes([
style({ opacity: 0.0, right: -200, zIndex: 2 }),
style({ opacity: 1.0, right: 0, zIndex: 2 })
]))
])
])
]
})
export class AlbumBrowserComponent implements OnInit, AfterViewInit {
private readonly SWIPE_ACTION = { LEFT: 'swipeleft', RIGHT: 'swiperight'};
public readonly LEFT = 'LEFT';
public readonly RIGHT = 'RIGHT';
public orientation: Orientation = 'none';
public images: string[] = [];
public selectedImage: string[] = [];
public changeDetectorRef: ChangeDetectorRef;
constructor(changeDetectorRef: ChangeDetectorRef) {
this.changeDetectorRef = changeDetectorRef;
this.images.push('../../../assets/images/1.jpg');
this.images.push('../../../assets/images/2.jpg');
this.images.push('../../../assets/images/3.jpg');
this.selectedImage.push(this.images[0]);
}
ngOnInit() {
}
public click(direction: string) {
if (direction === this.LEFT) {
this.swipe(this.SWIPE_ACTION.LEFT);
}
if (direction === this.RIGHT) {
this.swipe(this.SWIPE_ACTION.RIGHT);
}
}
public swipe(action = this.SWIPE_ACTION.RIGHT) {
let res: string;
const index = this.images.indexOf(this.selectedImage[0]);
if (action === this.SWIPE_ACTION.LEFT) {
this.orientation = 'next';
this.selectedImage = [];
this.changeDetectorRef.detectChanges();
res = !!this.images[index + 1] ?
this.images[index + 1] :
this.images[0];
}
if (action === this.SWIPE_ACTION.RIGHT) {
this.orientation = 'prev';
this.selectedImage = [];
this.changeDetectorRef.detectChanges();
res = !!this.images[index - 1] ?
this.images[index - 1] :
this.images[this.images.length - 1];
}
this.selectedImage.push(res);
}
}
模板
<div class="album-browser-container">
<div class="left arrow small-glow" (click)="click(LEFT)"></div>
<div class="viewport-frame glow">
<div class="viewport">
<div class="image-slider"
(swipeleft)="swipe($event.type)"
(swiperight)="swipe($event.type)">
<div class="carousel"
*ngFor="let image of selectedImage">
<div class="image-container"
[@animateCarousel]="orientation">
<img [src]="image" class="album-image">
</div>
</div>
</div>
</div>
</div>
<div class="right arrow small-glow" (click)="click(RIGHT)"></div>
</div>
【问题讨论】：