Css 类立即更改而不是使用转换答案

【问题标题】：Css class changing immediately instead of using transitionCss 类立即更改而不是使用转换
【发布时间】：2021-03-04 00:48:49
【问题描述】：

我有一个页面加载组件。应该只有一段时间的白屏，然后应该出现加载图像+消息。但它不起作用，加载程序立即出现。怎么了？

html

    <div class="full-screen-centered-layout" >
    <div id="loader">        
        <img class="loading-image" src=[Loader image] />
        <h3  *ngIf="PageLoadingMessage" class="loading-message">{{ PageLoadingMessage | translate }}...</h3>
    </div>
</div>

css

.full-screen-centered-layout {
    background-color: #ffffff;
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: grid;
    z-index: 2;
}

.loading-image {
    margin-left: auto;
    margin-right: auto;
    display: flex;
}

.loading-message {
    text-align: center;
    color: lightgray;
}

#loader {
    -webkit-transition: opacity 2s linear 2s;
    -moz-transition: opacity 2s linear 2s;
    -ms-transition: opacity 2s linear 2s;
    -o-transition: opacity 2s linear 2s;
    transition: opacity 2s linear 2s;
    opacity: 0;
}

#loader.show {
    -webkit-transition: opacity 2s linear 2s;
    -moz-transition: opacity 2s linear 2s;
    -ms-transition: opacity 2s linear 2s;
    -o-transition: opacity 2s linear 2s;
    transition: opacity 2s linear 2s;
    opacity: 1;
}

我要更改类的组件的一部分

public ngOnInit(): void {
    this.Initialize();
}

private Initialize(): void{
    let element = document.getElementById("loader");
    element .classList.toggle("show");
}

【问题讨论】：

标签： html css angular css-transitions

【解决方案1】：

将加载程序更改为类而不是 id。由于 id 更具体，添加的 .show 类不会成功。

  <div class="loader">
        <img class="loading-image" src="./logo.jpg" />
        <h3 *ngIf="PageLoadingMessage" class="loading-message">{{ 
         PageLoadingMessage | translate }}...</h3>
  </div>

.loader {
    -webkit-transition: opacity 2s linear 2s;
    -moz-transition: opacity 2s linear 2s;
    -ms-transition: opacity 2s linear 2s;
    -o-transition: opacity 2s linear 2s;
    transition: opacity 2s linear 2s;
    opacity: 0;
}

在类 .show 上给出过渡持续时间（以秒为单位的时间）和属性需要受到影响

.show {
    transition-duration: 5s;
    transition-property: opacity;
}

【讨论】：