要在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"状态,并且元素会从不可见到可见的淡入效果。
请注意,这只是一个简单的示例,您可以根据您的需求调整动画的样式和持续时间。