要在Angular 8中使用拖放方式扩展元素宽度，并添加动画效果，可以按照以下步骤操作：

1. 首先，安装@angular/cdk库，该库为Angular提供了一些常用的可重用UI组件和指令，包括拖放功能。可以使用以下命令进行安装：

npm install @angular/cdk

2. 在需要使用拖放功能的组件中，导入必要的模块和服务：

import { Component } from '@angular/core';
import { CdkDrag, CdkDragEnd } from '@angular/cdk/drag-drop';
import { animate, state, style, transition, trigger } from '@angular/animations';

3. 创建一个动画效果，该动画将通过改变元素的宽度来实现元素扩展的效果。在组件的@Component装饰器中定义动画：

@Component({
  selector: 'app-draggable',
  templateUrl: './draggable.component.html',
  styleUrls: ['./draggable.component.css'],
  animations: [
    trigger('expand', [
      state('collapsed', style({ width: '200px' })),
      state('expanded', style({ width: '400px' })),
      transition('collapsed <=> expanded', animate('300ms ease-in-out')),
    ]),
  ],
})

上面的动画定义了两个状态：collapsed和expanded，并且在这两个状态之间定义了一个过渡。过渡的时间为300毫秒，并且采用了ease-in-out的缓动函数。

4. 在组件的HTML模板中，使用CdkDrag指令将元素标记为可拖动的：

在上面的示例中，cdkDrag指令被应用到了一个外层的容器元素上，这使得整个容器都可以被拖动。内部的元素使用了[@expand]属性来绑定动画。

5. 在组件的代码中，定义一个elementState变量来跟踪元素的状态，并且在拖放结束时更新该变量的值：

export class DraggableComponent {
  elementState: 'collapsed' | 'expanded' = 'collapsed';

  onDragEnd(event: CdkDragEnd) {
    if (event.distance.x > 0) {
      this.elementState = 'expanded';
    } else {
      this.elementState = 'collapsed';
    }
  }
}

在上面的代码中，elementState变量初始设置为collapsed状态。当拖放结束时，根据拖动的距离来判断元素应该处于collapsed还是expanded状态。

6. 最后，为了使动画生效，需要在组件的CSS文件中添加相关的样式：

.draggable-element {
  transition: width 300ms ease-in-out;
}

通过添加上述样式，动画将通过改变元素的宽度来实现。

通过以上步骤，就可以在Angular 8中实现通过拖放方式扩展元素宽度，并添加动画效果了。