Angular 基于拖放容器的不同cdk拖动预览动画

我试图在释放拖动的组件时，根据放置容器获得不同的动画。 基本上，我有两个cdkDropList。一个是多个可拖动元素的卡片列表，另一个是只有一个元素的卡片查看器，大小为两倍。用户可以将卡片从列表拖动到查看器，以获得更好的视图

当用户拖动一张卡，然后将其释放时，可能出现两种情况：

卡片在查看器上方。然后，卡必须设置动画，以便在缩放到新尺寸时滑入查看器。 卡不在查看器上方。然后，卡必须滑回其在列表中的原始位置，同时保持其大小。 您可以使用以下css设置卡滑动到其目标位置的动画：

.cdk-drag-animating {
  transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
}

到目前为止，一切顺利。 然而，我现在必须添加一个条件css规则，添加一个转换：scale2；如果放置容器是查看器

这就是我被困的地方

我试图避免直接访问DOM，遵循角度准则，所以我想在卡片设置动画时向其添加一个类。但是CDK似乎没有办法获得预览/动画组件的参考

我已成功获取目标大小和拖动组件，组件ts中包含以下代码：

  onDragEnter(event: CdkDragEnter) {
    if (_.contains(event.container.element.nativeElement.classList,"large")){
      this.targetSize= "large";
    } else {
      this.targetSize= "medium";
    }
  }      
  onDragRelease(event: CdkDragRelease) {
    this.renderer.addClass(event.source.element.nativeElement, this.targetSize);
  }

但是，此引用是拖动对象的引用，而不是预览对象的引用！在动画上放置很长的计时器以允许我检查它时，我可以看到以下DOM元素：

    <div _ngcontent-auk-c7="" cdkdrag="" class="cdk-drag large" 
ng-reflect-data="[object Object]" style="display: none;">...</div>

    <div _ngcontent-auk-c7="" cdkdrag="" class="cdk-drag cdk-drag-preview cdk-drag-animating" 
ng-reflect-data="[object Object]" style="touch-action: none; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; user-select: none; width: 135px; height: 175px; transform: translate3d(415px, 84px, 0px); pointer-events: none; margin: 0px; position: fixed; top: 0px; left: 0px; z-index: 1000;" dir="ltr"><!----><div _ngcontent-auk-c7="" class="card-holder medium"><app-card-base _ngcontent-auk-c7="" _nghost-auk-c8="" ng-reflect-card="[object Object]" ng-reflect-size="medium"><div _ngcontent-auk-c8="" class="card-container medium flip-front" ng-reflect-klass="card-container" ng-reflect-ng-class="medium,flip-front">...</div>

如您所见，我们有两个元素，一个是正确的大类，但显示在屏幕上：无；另一个是类cdk drag preview cdk drag animating，但不是新的大类

因此，由于我无法向第二个元素添加类，我无法使它有条件地更改其动画。。。 一个奇怪的副作用是，新的大类被添加到卡中，未来从这张卡上的cdk拖动预览将拥有大类！然而，这并不好，因为它似乎表明我应该在开始拖动之前拥有我的类，而我不知道用户是否真的会将其拖动到查看器的dropList中

TL；博士：

我需要动态添加一个类到cdk drag preview中，该类基于dropList的目标。 cdk拖动预览似乎无法在任何cdk拖动事件中引用 因此，一旦开始拖动，我就无法将类添加到其中并更改最终动画。

---

好吧，这并不是我真正想要的，但它确实有效

在cdkDragReleased事件中，我使用document.querySelector获取cdkDragPreview元素的引用

我不认为它遵循了Angular的指导原则，但至少我让它工作了，现在我的卡片动画根据目标水滴列表正确缩放

  onDragRelease(event: CdkDragRelease) {
    const preview = new ElementRef<HTMLElement>(document.querySelector(".cdk-drag.cdk-drag-preview"));
    this.renderer.addClass(preview.nativeElement, this.targetSize);
  }

---

好吧，这并不是我真正想要的，但它确实有效

在cdkDragReleased事件中，我使用document.querySelector获取cdkDragPreview元素的引用

我不认为它遵循了Angular的指导原则，但至少我让它工作了，现在我的卡片动画根据目标水滴列表正确缩放

  onDragRelease(event: CdkDragRelease) {
    const preview = new ElementRef<HTMLElement>(document.querySelector(".cdk-drag.cdk-drag-preview"));
    this.renderer.addClass(preview.nativeElement, this.targetSize);
  }

HTML

打字稿

  cdkDropListEntered(event: CdkDragEnter<string[]>) {
    const preview = new ElementRef<HTMLElement>(document.querySelector('.cdk-drag.cdk-drag-preview'));
    this.renderer.addClass(preview.nativeElement, 'class-name');
  }

  cdkDropListExited(event: CdkDragExit<string[]>) {
    const preview = new ElementRef<HTMLElement>(document.querySelector('.cdk-drag.cdk-drag-preview'));
    this.renderer.removeClass(preview.nativeElement, 'class-name');
  }

HTML

打字稿

  cdkDropListEntered(event: CdkDragEnter<string[]>) {
    const preview = new ElementRef<HTMLElement>(document.querySelector('.cdk-drag.cdk-drag-preview'));
    this.renderer.addClass(preview.nativeElement, 'class-name');
  }

  cdkDropListExited(event: CdkDragExit<string[]>) {
    const preview = new ElementRef<HTMLElement>(document.querySelector('.cdk-drag.cdk-drag-preview'));
    this.renderer.removeClass(preview.nativeElement, 'class-name');
  }