The first phase of the project has recently come out; started finishing optimization, so ready to handle routing here next animation;
Then look at the document on the official website, and then make a note of their own;
angular animation carding 1 introduced BrowserAnimationsModule root modules, which can able to introduce root module Angular animation application and import statement Imports;. Import BrowserAnimationsModule} from { '@ Angular / Platform-Browser / Animations' ; 2 . The Animation function import file assembly function: import { Trigger, State, style, Animate, Transition // ... } from '@ Angular / animations' ; . 3 in the components requires animation, adding metadata attributes, such as:. @ the Component ({ Selector: 'the root-App' , templateUrl: 'app.component.html' , styleUrls: [ 'app.component.css' ], Animations: [ //Triggers Go here Wallpaper Animation ] }) // Angular animation base: 1 ) pattern // style (): css specify the animation style, style attributes html small portion camelCase; style ({ Opacity: 0.5 , the backgroundColor: 'Red' } ) 2 ) style naming // state (): Create named css style, when converted to the state name, style pattern corresponding to the application; state () and style () associated with, // can switch / reference state different styles to change the display name; // such as: state ( 'open', style ({ // definition of a function called the open state corresponding to the specified style and pattern; height: '200px' , Opacity: . 1 , the backgroundColor: ' Yellow ' })) State ('Closed', style ({ // definition of a function called the open state corresponding to the specified style and pattern; height: '100px' , Opacity: 0.5 , the backgroundColor: 'Green' })) . 3 ) to increase the transition animation, such that each state transition pattern smoothing // transition (): animated transition modified by varying the time and the animation sequence gives the respective state () state, the first parameter: define two transition state () direction; the second parameter to animate () function; // Animate ( 'delay dURATION that the easing'): // definition specifies the transition timing information, the first parameter is: duration, delay time, easing effect (ease-in (slow down after) , ease-out (first slow-fast), ease-in-out (after the first slow-slow acceleration); the second argument: single style function style / multistep custom defined keyframes () // eg: Transition ( '* => open, closed => open ',[ // define transition direction when the * (any) state to an open state, the use of animation, the animation target transparency is sustained so that the 1s 0; shared between a plurality of state patterns animate ( '1s', Style ({Opacity: '0' }), ), ]), . 4 ) trigger the animation // Trigger (): name animation that includes some state () transitions and the like; and animation elements bound to trigger on // when bound to the elements of the value change trigger, trigger the animation bound; a plurality of flip element may trigger the same time, but only the elements in one state at any time; // eg: animations: [ @ in the metadata, OpenClose triggered flip-flop, the transition from open to Close, Close => open; trigger ( 'OpenClose' , [ // ... State ( 'open' , style ({ height: '200px' , Opacity : . 1 , the backgroundColor: 'Yellow' })), State ( 'Closed', Style ({ height: '100px' , Opacity: 0.5 , the backgroundColor: 'Green' })), Transition ( 'Open => Closed' , [ Animate ( 'lS' ) ]), Transition ( 'Closed => Open' , [ Animate ( '0.5s' ) ]), ]), ], . 5 ) on the trigger element binding the html // <div [@triggerName] = "expression the"> ... </ div>; expression is the state () state; // such as: ? <div [@openClose] = "the isOpen 'Open':'closed'" class="open-close-container"> <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p> </div>
Overall code is as follows:
About importing module; can be placed in the root module, the module can also be placed in a separate case; (because the document is not the official website of the directory hierarchy; and there is a normal project will be graded according to the different modules of different project ideas; being the first such deal , so I come back to find out exactly what modifications;)
simple directory structure:
import { Component, OnInit } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'app-animation-test',
templateUrl: './animation-test.component.html',
styleUrls: ['./animation-test.component.scss'],
animations: [
trigger('openClose', [
state(
'open',
style({
height: '200px',
opacity: 1,
backgroundColor: 'yellow'
})
),
state(
'close',
style({
height: '100px',
opacity: 0.5,
backgroundColor: 'red'
})
),
transition('open => close', animate('1s')),
transition('close => open', animate('0.5s'))
])
]
})
export class AnimationTestComponent implements OnInit {
isOpen = true;
this
toggle () {
ngOnInit () {}
constructor () {}.isOpen = !this.isOpen;
}
}
<button (click)="toggle()">切换</button> <div [@openClose]="isOpen ? 'open' : 'close'" class="animation-container"> <p>hello world</p> </div>
.animation-container { border: 1px solid #dddddd; margin-top: 1em; padding: 20px 20px 0px 20px; color: #000000; font-weight: bold; font-size: 20px; }
angular animation carding
1. Import BrowserAnimationsModule root modules, which can able to introduce root module Angular animation application and import statement Imports; Import BrowserAnimationsModule} from { '@ Angular / Platform-Browser / Animations';
2. the animation function import file assembly function: import {Trigger, State, style, Animate, // ...} Transition from '@ Angular / animations';
3. under components requires animation, adding metadata attributes, such as: @ the Component ({Selector: 'the root-App', templateUrl: 'app.component.html', styleUrls: [ 'app.component.css'], animations: [animation Triggers // Go here Wallpaper]})
// animation based Angular : 1) pattern // style (): html css style specifies that the animation part, a small hump style attribute name; style ({opacity: 0.5, backgroundColor: 'red'})
2) // state named style (): Create named css style, when converted to the state name, style pattern corresponding to the application; state () and style () associated with, by switching // / reference state name different styles to change the display; // such as: state ( 'open', style ({// definition of a function called the open state corresponding to the specified style and pattern; height: '200px', opacity : 1, backgroundColor: 'yellow '})) state (' closed ', style ({// definition of a function called the open state corresponding to the specified style and pattern; height:' 100px ', Opacity: 0.5, the backgroundColor:' Green '}))
. 3) transition animation increases, so that the smooth transition from each state pattern // transition (): animated transition modified by varying the time and the animation sequence gives the respective state () state, the first parameter: define two transition state () direction; the second parameter is animate () function; // animate ( 'duration delay easing '): // definition specifies the transition timing information, the first parameter is: duration, delay time, easing effect (ease-in (slow down after), (after the first slow-fast) ease-out, ease-in -out ( after the first slow-slow acceleration); Two parameters: a function of a single style style / multistep custom defined keyframes () // eg: transition ( '* => open , closed => open', [// define transition direction, from * (optional) to the open state state, using the animated picture which transparency is sustained so that the target 1s 0; shared between a plurality of state patterns animate ( '1s', style ( {opacity:'
4) trigger the animation // trigger (): Named animation that includes some of the state () and transitions and so on; and bind to an element of // trigger the animation when the trigger changes in the value of the element is bound to trigger binding animation; a plurality of elements simultaneously may be triggered flip-flops, but only the elements in one state at any time; // such as: animations: [// in the metadata, openClose triggered flip-flop, the transition from open to close, close => open; trigger ( 'openClose', [// ... state ( 'open', style ({height: '200px', opacity: 1, backgroundColor: 'yellow'})), state ( 'closed' , style ({height: '100px', opacity: 0.5, backgroundColor: 'green'})), transition ( 'open => closed', [animate ( '1s')]), transition ( 'closed => open' , [animate ( '0.5s')]),]),],
5) the trigger element bound to the html // <div [@triggerName] = "expression"> ... </ div>; expression value of state () state; // such as: <div [@ openClose] = "? isOpen 'open': 'closed'" class = "open-close-container"> <p> The box is now {{isOpen 'Open':? 'Closed'}}! </ p> < / div>