ng animated transitions

Animated transition both methods

1. angular + animation implemented

• In app-module.ts incorporated in BrowserAnimationsModule 
  1.import { BrowserAnimationsModule} from '@angular/platform-browser/animations';   

  2.imports: [

      BrowserAnimationsModule

    ],
• In the assembly need to use the
  . 1 .html file [@openClose] = "value of judgment"
  2 .ts file
  2.1 引入 import {trigger,style,state,animate,transition,keyframes,group} from '@angular/animations';
  2.2 @Component input transition animation you need in
  animations:[] 

Example:

 <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',[

        Animated ( '1s')

      ]),transition('closed => open',[

        Animated ( '1s')

      ])

    ])

  ]

})

  public isOpen:boolean = false;

You need to click on the name of the event () {　　

this.isOpen = !this.isOpen;

}

 

 

Method 2 using css3 + ngclass

　　Components in 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;

}