Angular PrimeNG StyleClass进入/离开动画

Angular PrimeNG是一个用于Angular应用程序的开源框架。它有一套丰富的本地UI组件，可以用来制作有吸引力和可扩展的Web界面。在这篇文章中，我们将讨论Angular PrimeNG StyleClass Enter/Leave动画。

StyleClass用于在组件的进入和离开动画中管理CSS类，或在元素上切换类。进入/离开动画属性用于在进入/离开动画的不同阶段添加或删除特定的类。

Angular PrimeNG StyleClass进入/离开动画属性：

pStyleClass。这个属性说明了目标元素的选择器。它接受一个字符串值，可以是一个有效的CSS查询或一个目标关键词。
enterClass。这个属性定义了目标元素开始出现在屏幕上时要添加的类。
enterActiveClass。这个属性定义了在进入动画时要添加的类。
enterToClass。这个属性定义了当进入动画完成后要添加的类。
leaveClass。这个属性定义了目标元素开始从屏幕上隐藏时要添加的类。
leaveActiveClass。这个属性定义了离开动画时要添加的类。
leaveToClass。这个属性定义了离开动画完成后要添加的类。
hideOnOutsideClick:该属性说明当元素外部被点击时是否触发离开动画。
toggleClass:当不需要进入或离开动画时，该属性用于切换一个元素的类别。

目标关键词为pStyleClass属性：

@next:这个关键字用于锁定当前元素的下一个元素。
@prev：这个关键字用来针对当前元素的下一个元素。
@parent：这个关键字用来针对父元素。
@grandparent：这个关键词用来针对祖先（父系的父）元素。

语法:

<button 
      pButton 
      label="..." 
      pStyleClass="@next" 
      leaveActiveClass="..." 
      leaveToClass="...">
</button>
<div class="..."> ... </div>

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：它将看起来像如下。

Angular PrimeNG StyleClass进入/离开动画

Project Structure

让我们看一些例子来了解Angular PrimeNG StyleClass Enter/Leave动画属性的使用。

例子1：这是一个基本的例子，展示了风格类的输入/离开动画属性的使用。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG StyleClass Enter/Leave Animation</h4>
  
<button 
      pButton 
      label="Show the Content" 
      class="mr-3" 
      pStyleClass=".content" 
      enterClass="hidden" 
      enterActiveClass="inAnimation">
</button>
<button 
      pButton 
      label="Hide the Content" 
      pStyleClass="@next" 
      leaveActiveClass="outAnimation" 
      leaveToClass="hidden">
</button>
<div class="content hidden">
      GeeksforGeeks is a computer science 
      portal for geeks. It offers articles 
      on various computer science subjects 
      like Data Structures, Algorithms, 
      Compiler Design, Computer Networks, etc.
</div>

.content{
    background-color: rgb(112, 255, 119);
    width: 300px;
    margin-top: 25px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    font-size: 20px;
}
  
@keyframes inAnim {
    0% {
        opacity: 0;
    }
  
    100% {
        opacity: 1;
    }
}
  
@keyframes outAnim {
    0% {
        opacity: 1;
    }
  
    100% {
        opacity: 0;
    }
}
  
.inAnimation {
    animation: inAnim .5s linear;
}
  
.outAnimation {
    animation: outAnim .5s linear;
}

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
  
export class AppComponent { }

import { NgModule } from "@angular/core";
import { BrowserModule }
    from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { StyleClassModule } from 'primeng/styleclass';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        StyleClassModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

运行应用程序的步骤：

在你项目的根目录下运行以下命令。

ng serve --open

输出:

Angular PrimeNG StyleClass进入/离开动画

例子2：这个例子展示了使用toggleClass属性来切换一个元素的特定类别。

<h2 style="color: green">GeeksforGeeks</h2>
<h4>Angular PrimeNG StyleClass Enter/Leave Animation</h4>
  
<button pButton 
      label="ToggleClass .hidden" 
      pStyleClass="@next" 
      toggleClass="hidden">
</button>
<div 
      style="
      background-color: rgb(112, 255, 119);
      width: 300px;
      margin-top: 25px;
      padding: 10px;
      border-radius: 5px;
      text-align: center;
      font-size: 20px;
      "
>
      GeeksforGeeks is a computer science
      portal for geeks. It offers articles
      on various computer science subjects
      like Data Structures, Algorithms,
      Compiler Design, Computer Networks, etc.
</div>

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
  
export class AppComponent { }

import { NgModule } from "@angular/core";
import { BrowserModule }
    from "@angular/platform-browser";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { ButtonModule } from "primeng/button";
import { StyleClassModule } from 'primeng/styleclass';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        StyleClassModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

输出:

Angular PrimeNG StyleClass进入/离开动画