title: Different cdk-drag-preview animation based on drop container
body: <p>I'm trying to get a different animation when releasing a dragged component, based on the drop container.
  Basically, I have two cdkDropList. One is a list of cards (multiple draggable elements), the other is a card viewer with only one element, twice the size. The user can drag a card from the list to the viewer, to have a better view.</p>
  
  <p>When the user drag a card, then release it, two cases are possible:</p>
  
  <ul>
  <li>The card is over the viewer. The card must then be animated to slide into the viewer while scaling to its new size.</li>
  <li>The card is not over the viewer. The card must then slide back to its original position in the list, while keeping its size.</li>
  </ul>
  
  <p>You can animate the card sliding to its destination position with the following css:</p>
  
  <pre><code>.cdk-drag-animating {
    transition: transform 300ms cubic-bezier(0, 0, 0.2, 1);
  }
  </code></pre>
  
  <p>So far, so good. 
  However, I must now add a conditional css rule, adding a "transform: scale(2);" if the drop container is the viewer. </p>
  
  <p>And this is where I'm stuck!</p>
  
  <p>I'm trying to avoid direct DOM access, following the angular guideline, so I want to add a class to the card while its animated. But CDK don't seem to have a way to get a reference of the preview/animating component!</p>
  
  <p>I've managed to get the target size and the dragging component, with the following code in my component ts:</p>
  
  <pre><code>  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);
    }
  </code></pre>
  
  <p>However, this reference is of the dragging object, and NOT the preview one! When putting a very long timer on the animation to allow me to inspect it, I can see the following DOM elements:</p>
  
  <pre><code>    &lt;div _ngcontent-auk-c7="" cdkdrag="" class="cdk-drag large" 
  ng-reflect-data="[object Object]" style="display: none;"&gt;...&lt;/div&gt;
  
      &lt;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"&gt;&lt;!----&gt;&lt;div _ngcontent-auk-c7="" class="card-holder medium"&gt;&lt;app-card-base _ngcontent-auk-c7="" _nghost-auk-c8="" ng-reflect-card="[object Object]" ng-reflect-size="medium"&gt;&lt;div _ngcontent-auk-c8="" class="card-container medium flip-front" ng-reflect-klass="card-container" ng-reflect-ng-class="medium,flip-front"&gt;...&lt;/div&gt;
  </code></pre>
  
  <p>As you can see, we have two elements, one with the correct class "large", but on "display:none", and a second, with the classes "cdk-drag-preview cdk-drag-animating", but not the new class "large".</p>
  
  <p>So, as I cannot add a class to this second element, I cannot make it conditionnaly change its animation...
  A strange side effect is that the new class "large" is added to the card, and future cdk-drag-preview from this card will then have the "large" class! However, it's not good since it seems to indicate I should had my class <strong>before</strong> the drag start, when I don't know if the user will really drag it to the viewer dropList..</p>
  
  <p><strong>TL;DR :</strong></p>
  
  <ul>
  <li>I need to dynamically add a class to cdk-drag-preview based on which dropList is targeted.</li>
  <li>cdk-drag-preview don't seem to be able to be referenced in any of the cdk-drag events</li>
  <li>I thus cannot add my class to it and change the final animation once the drag as started.</li>
  </ul>