ng的动画过渡

Posted 2020-11-23 rockyjs

动画过渡两种方法

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:[] 

实例：

 <ul class="childHeight" [@openClose]="isOpen ? ‘open‘ : ‘closed‘">

     <li>General Elements</li>

      <li>Advanced Elements</li>

      <li>Editors</li>

      <li>Validation</li>

  </ul>

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中

　　

<ul class="childHeight" [ngClass]="{‘formStyle‘:formall,‘formOut‘:!formall}" > 

      <li>General Elements</li>

      <li>Advanced Elements</li>

      <li>Editors</li>

      <li>Validation</li>

 </ul>

 

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;

}