要在Angular 6中使用"display none"并使动画覆盖该状态，您可以使用Angular的动画功能。

首先，在组件的CSS文件中将元素的"display"属性设置为"none"，然后使用Angular的动画功能来创建动画效果。

在组件的CSS文件中：

.element {
  display: none;
}

在组件的ts文件中，导入动画相关的模块和函数：

import { trigger, state, style, animate, transition } from '@angular/animations';

然后，在组件的ts文件中，定义动画：

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css'],
  animations: [
    trigger('fadeInOut', [
      state('void', style({
        display: 'none'
      })),
      state('*', style({
        display: 'block'
      })),
      transition(':enter', [
        style({ opacity: 0 }),
        animate('500ms', style({ opacity: 1 }))
      ]),
      transition(':leave', [
        animate('500ms', style({ opacity: 0 }))
      ])
    ])
  ]
})

在组件的HTML文件中，使用动画：

Content to be animated

现在，当组件加载时，动画会覆盖"display none"状态，并且元素会从不可见到可见的淡入效果。

请注意，这只是一个简单的示例，您可以根据您的需求调整动画的样式和持续时间。