Question

当我单击复选框材料时，如何在动画后显示内容。所以我想在单击checkox时先显示动画，然后在5s或一段时间后显示文本。我附上了代码！我将不胜感激！谢谢！

组件

<mat-checkbox #small (change)="0">Check me!</mat-checkbox>
<p *ngIf="small.checked">Small paragraph</p>
<div *ngIf="small.checked" class="loader"></div>

打字稿后面的打字稿

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ur3newtwo';
  show = false;
}

模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {MatButtonModule, MatCheckboxModule} from '@angular/material';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule, 
    MatCheckboxModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

.loader {
    border: 4px solid #cccccc; /* Light grey */
    border-top: 2px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

Answer 1

使用2个不同的变量来控制文本和加载程序的外观，然后使用超时来等待，然后再更改将使文本显示的变量。例如：

<mat-checkbox #small (change)="toggleCheckbox($event.checked)">Check me!</mat-checkbox>
<p *ngIf="showText">Small paragraph</p>
<div *ngIf="showLoader" class="loader"></div>

在app.component.ts中：

export class AppComponent {
    showText = false;
    showLoader = false;

    toggleCheckbox(checked: boolean) {
        if (checked) {
            this.showLoader = true;
            // Use a timeout to wait 5 seconds before showing the text
            setTimeout(() => { this.showText = true; }, 5000);
        } else {
            this.showText = false;
            this.showLoader = false;
        }
    }
}

选中复选框后如何在内容之前显示加载动画？（角度）

1 个答案: