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;

}