Moving End multiplicity Series 5--cut-out animation

Mobile End Multiplicity Structure series-mobile

This series of articles, if not specifically stated, is compatible with the Android 4.0.4+

Because the next few articles all need to use to cut out the animation what, so first put this to say. For the sake of simplicity, we will only discuss translate offset animations (translate is more efficient than top/left/right/bottom absolute positioning), and the same is true for other rotational scaling fades.

Transition animation

Define the element to be moved outside of the visual range, take the left direction as an example, and define transition:

.demo{    @include translate3D(-2000px, 0, 0);    -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out;}

From entering the visual range, regardless of the direction from the top or the left or right, ultimately attributed to 0, so enter the time to add Class translate-in , and leave the time to remove translate-in can

.translate-in{    @include translate3D(0, 0, 0);}

Animation animation

Define the element to be moving outside of the visual range, and also take the left direction as an example:

.demo{    @include translate3D(-2000px, 0, 0);}

Re-define KeyFrames:

Move from left to right into the animation @mixin left-in ($startX:-2000px,$endX:0) {@Include KeyFrames (left-in) {0% {@Include Translate3d ($startX,0,0); }100% {@include translate3d ( $endX, 0, 0); }}. left-in {@include animation-name (left-in); @extend%animated;}} //disappears from right to left animation @mixin left-out ( $startX: 0,  $endX:-2000px) {@include keyframes (left-out) {0% {@include translate3d ( $startX, 0, 0);} 100% {@include translate3d ( $endX, 0, 0); }}. left-out {@include animation-name (left-out); @extend%animated;}}     

Call the keyframes defined above, the element enters the visual range to add Class left-in , the element leaves the visual range is replaced by the end of the left-in left-out animation call Animationend event, deleteleft-out

@include left-in;@include left-out;

The parsed CSS is:

. left-in,. left-out{-webkit-animation-duration: 1s; Animation-duration: 1s; -webkit-animation-fill-mode:Both Animation-fill-mode:Both}@-webkit-keyframes left-in {0%{-webkit-transform: Translate3d (-2000px,0,0); }100%{-webkit-transform: Translate3d (0,0,0); }}@keyframes left-in {0%{Transform: Translate3d (-2000px,0,0); }100%{Transform: Translate3d (0,0,0); }}. left-in{-webkit-animation-name:left-in; Animation-name:left-in;}@-webkit-keyframes Left-out {0%{-webkit-transform: Translate3d (0,0,0); }100%{-webkit-transform: Translate3d (-2000px,0,0); }}@keyframes Left-out {0%{Transform: Translate3d (0,0,0); }100%{Transform: Translate3d (-2000px, 0, 0);  }}. left-out { -webkit-animation-name: left-out;  animation-name: left-out;}            

Summarize

The difference between transition animations and animation animations is that:

1, transition animation can only define the start and end position, the middle cannot be defined, while keyframes can define n frames as the intermediate transition frame.

2, for cut-out animation, transition animation We just add to delete a class can be done, and animation animation need to switch two classes, and finally delete class, more complex.

3, if your animation does not need to customize the intermediate frame, that directly use transition animation can, switch a class on it, the end of the movement can be JS call transitionend function, and if you need to customize the intermediate frame, then animation, Of course, there are three animation events Animationstart,animationiteration,animationend

If you need to reprint, please indicate the source: http://www.w3cplus.com/mobile/mobile-terminal-refactoring-slider-animation.html

Moving End multiplicity Series 5--cut-out animation