如何让shuffling css动画在Angular8中工作？（类似代码适用于angular2）

我有一个要设置动画的应用程序转换组组件。在我的css中，我有：

.flip-list-move {
  transition: transform 1s;
}

虽然它在调用shuffle时出现，但它始终会立即更改，并且从不使用angular8设置动画。它在angular2中工作。问题是什么

我的代码是：

app.component.ts

@Component({
  selector: 'my-app',
  template: `
    <h2>Items reorder/shuffle animations with Angular8 ngFor</h2>
    <button (click)="shuffle()">Configure</button>
    <ul [transition-group]="'flip-list'">
      <li *ngFor="let item of items" transition-group-item>
        {{ item }}
      </li>
    </ul>
  `,
})
export class App {
  items = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  shuffle() {
    this.items = this.shufflestuff(this.items)
  }
}

shufflestuff=function(array) {
  const length = array == null ? 0 : array.length
  if (!length) {
    return []
  }
  let index = -1
  const lastIndex = length - 1
  const result = this.copyArray(array)
  while (++index < length) {
    const rand = index + Math.floor(Math.random() * (lastIndex - index + 1))
    const value = result[rand]
    result[rand] = result[index]
    result[index] = value
  }
  return result
}

copyArray=function(source, array) {
  let index = -1
  const length = source.length

  array || (array = new Array(length))
  while (++index < length) {
    array[index] = source[index]
  }
  return array
}

@组件({
选择器：“我的应用程序”，
模板：`
物品使用Angular8 ngFor重新排序/洗牌动画
配置


{{item}}


`,
})
导出类应用程序{
项目=[1,2,3,4,5,6,7,8,9]；
洗牌{
this.items=this.shufflestuff（this.items）
}
}
shufflestuff=函数（数组）{
const length=array==null？0:array.length
如果（！长度）{
返回[]
}
设索引=-1
const lastIndex=长度-1
const result=this.copyArray（数组）
而（++索引<长度）{
const rand=index+Math.floor（Math.random（）*（lastIndex-index+1））
常量值=结果[rand]
结果[rand]=结果[索引]
结果[索引]=值
}
返回结果
}
copyArray=函数（源，数组）{
设索引=-1
常量长度=source.length
数组| |（数组=新数组（长度））
而（++索引<长度）{
数组[索引]=源[索引]
}
返回数组
}

我已导入模块，在我的transition-group.ts文件中，我有：

从'@angular/core'导入{Component，ContentChildren，Directive，ElementRef，Input，QueryList}

@Directive({
  selector: '[app-transition-group-item]'
})
export class TransitionGroupItemDirective {
  prevPos: any;
  newPos: any;
  el: HTMLElement;
  moved: boolean;
  moveCallback: any;

  constructor(elRef: ElementRef) {
    this.el = elRef.nativeElement;
  }
}

@Directive({
  selector: '[app-transition-group]'
})
export class TransitionGroupComponent {
  @Input('app-transition-group') class;

  @ContentChildren(TransitionGroupItemDirective) items: QueryList<TransitionGroupItemDirective>;

  ngAfterContentInit() {
    this.refreshPosition('prevPos');
    this.items.changes.subscribe(items => {
      items.forEach(item => {
        item.prevPos = item.newPos || item.prevPos;
      });

      items.forEach(this.runCallback);
      this.refreshPosition('newPos');
      items.forEach(this.applyTranslation);

      // force reflow to put everything in position
      const offSet = document.body.offsetHeight;
      this.items.forEach(this.runTransition.bind(this));
    })
  }

  runCallback(item: TransitionGroupItemDirective) {
    if(item.moveCallback) {
      item.moveCallback();
    }
  }

  runTransition(item: TransitionGroupItemDirective) {
    if (!item.moved) {
      return;
    }
    const cssClass = this.class + '-move';
    let el = item.el;
    let style: any = el.style;
    el.classList.add(cssClass);
    style.transform = style.WebkitTransform = style.transitionDuration = '';
    el.addEventListener('transitionend', item.moveCallback = (e: any) => {
      if (!e || /transform$/.test(e.propertyName)) {
        el.removeEventListener('transitionend', item.moveCallback);
        item.moveCallback = null;
        el.classList.remove(cssClass);
      }
    });
  }

  refreshPosition(prop: string) {
    this.items.forEach(item => {
      item[prop] = item.el.getBoundingClientRect();
    });
  }

  applyTranslation(item: TransitionGroupItemDirective) {
    item.moved = false;
    const dx = item.prevPos.left - item.newPos.left;
    const dy = item.prevPos.top - item.newPos.top;
    if (dx || dy) {
      item.moved = true;
      let style: any = item.el.style;
      style.transform = style.WebkitTransform = 'translate(' + dx + 'px,' + dy + 'px)';
      style.transitionDuration = '0s';
    }
  }
}

@指令({
选择器：“[应用程序转换组项目]”
})
导出类TransitionGroupItemDirective{
prevPos：任何；
newPos：任何；
el:HTMLElement；
移动：布尔；
移动回调：任何；
构造函数（elRef:ElementRef）{
this.el=elRef.nativeElement；
}
}
@指示({
选择器：“[应用程序转换组]”
})
导出类TransitionGroupComponent{
@输入（'app-TRANSTATION-group'）类；
@ContentChildren（TransitionGroupItemDirective）项：QueryList；
ngAfterContentInit（）{
此。刷新位置（“prevPos”）；
this.items.changes.subscribe（items=>{
items.forEach（item=>{
item.prevPos=item.newPos | | item.prevPos；
});
items.forEach（this.runCallback）；
此。刷新位置（“新位置”）；
items.forEach（此为applyTranslation）；
//强制回流以使所有部件就位
常量偏移=document.body.offsetHeight；
this.items.forEach（this.runTransition.bind（this））；
})
}
runCallback（项：TransitionGroupItemDirective）{
if（item.moveCallback）{
item.moveCallback（）；
}
}
runTransition（项：TransitionGroupItemDirective）{
如果（！item.moved）{
返回；
}
const cssClass=this.class+'-move'；
设el=item.el；
let style:any=el.style；
el.classList.add（cssClass）；
style.transform=style.webkitttransform=style.transitionDuration=''；
el.addEventListener（'transitionend'，item.moveCallback=（e:any）=>{
if（！e | |/transform$/.test（e.propertyName））{
el.removeEventListener（'transitionend'，item.moveCallback）；
item.moveCallback=null；
el.classList.remove（cssClass）；
}
});
}
刷新位置（道具：字符串）{
this.items.forEach（item=>{
item[prop]=item.el.getBoundingClientRect（）；
});
}
applyTranslation（项：TransitionGroupItemDirective）{
item.moved=false；
常量dx=item.prevPos.left-item.newPos.left；
const dy=item.prevPos.top-item.newPos.top；
if（dx | | dy）{
item.moved=true；
let style:any=item.el.style；
style.transform=style.webkitttransform='translate（'+dx+'px'，+dy+'px'）；
style.transitionDuration='0s'；
}
}
}

当按下按钮时，我如何使其动画化？Stackblitz在这里与Angular8:

Angular 2中的工作版本位于以下位置：

---

angular8和angular2版本之间的唯一区别是应用程序转换组/转换组是angular2中的@组件，而不是angular8中的@指令。如果有更好的方法，我愿意接受建议。

Angular在

QueryList

中没有看到更改，因为您忘记将

TransitionGroupItemDirective

添加到NgModule的声明数组中

import { TransitionGroupItemDirective } from './transition-group/transition-group.component';

@NgModule({
  ...
  declarations: [ ...TransitionGroupComponent, TransitionGroupItemDirective ],
})
export class AppModule { }