ng的动画过渡

动画过渡两种方法

1.使用angular+animation实现

  • app-module.ts中引入 BrowserAnimationsModule 
    1.import { BrowserAnimationsModule} from '@angular/platform-browser/animations';   
    2.imports: [
        BrowserAnimationsModule
      ],
  • 需要用到的组件
    1.html文件中[@openClose]="需要判断的值"
    2.ts文件中
    2.1 引入 import {trigger,style,state,animate,transition,keyframes,group} from '@angular/animations';
    2.2 在@Component中输入你需要的过渡动画
    animations:[] 

实例:

 
     
  • General Elements
  •      
  • Advanced Elements
  •      
  • Editors
  •      
  • Validation
  •  
    import {trigger,style,state,animate,transition,keyframes,group} from '@angular/animations';
     
    @Component({
      animations :[
        trigger('openClose',[
          state('open',style({
              height:'200px',
              width:'100%',
              opacity:1,
            })
          ),
          state('closed',style({
              height:'0px',
              width:'100%',
              opacity:0.5,
          })
          ),transition('open => closed',[
            animate('1s')
          ]),transition('closed => open',[
            animate('1s')
          ])
        ])
      ]
    })
      public isOpen:boolean = false;
    你需要的点击事件名(){  
    this.isOpen = !this.isOpen;
    }
     
     
    方法2 使用css3+ngclass
      组件html中
      
     
         
  • General Elements
  •      
  • Advanced Elements
  •      
  • Editors
  •      
  • Validation
  •  
     
    scss中
    .formStyle{zoom: 1; height: 200px !important;background-color:transparent; transition: 1s ease-in;}
    .formOut{height: 0px !important; transition: 1s linear;}
                    
    ts中
    你需要点击事件名(){ 
      this.isOpen = !this.isOpen;
    } 

    你可能感兴趣的:(ng的动画过渡)