AngularJS learning --- animation operation (Applying Animations) ngAnimate step 12

Dependencies (dependent js Library): bower. json copy code {"name": "angular-seed", "description": "A starter project for AngularJS", "version": "0.0.0", "homepage ": "https://github.com/angular/angular-seed", "license": "MIT", "private": true, "dependencies": {"angular": "1.2.x", "angular-mocks ":"~ 1.2.x "," bootstrap ":"~ 3.1.1 "," angular-route ":"~ 1.2.x "," angular-resource ":"~ 1.2.x "," jquery ":" 1.10.2 "," angular-animate ":"~ 1.2.x "} copy the code Note: angular-animate needs to be downloaded separately, here use the command npm install or bower install to download the angular-animate.js if you need more animation can be combined with Jquery animation to achieve the demand. how does angularjs implement animation? See the API: https://docs.angularjs.org/guide/animations Template (Template) First, introduce the angular-animate.js file, as follows: copy the code... <! -- For CSS Transitions and/or Keyframe Animations --> <link rel = "stylesheet" href = "css/animations.css">... <! -- JQuery is used for JavaScript animations (include this before angular. js) --> <script src = "bower_components/jquery. js"> </script>... <! -- Required module to enable animation support in AngularJS --> <script src = "bower_components/angular-animate/angular-animate.js"> </script> <! -- For JavaScript Animations --> <script src = "js/animations. js "> </script>... for details about how to copy code APIs, see ngAnimate Module & Animations (components and animations) app/js/Animations. js. angular. module ('phonecatanimations ', ['nganimate']); //... // this module will later be used to define animations //... app/js/app. js copy code //... angular. module ('phonecatapp', ['ngroute', 'phonecatanimations', 'phonecatcontrollers', 'phonecatfilters ', 'Python',]); //... now, the animation effect has been awakened. animating ngRepeat with CSS Transition Animations (use CSS Transition effects to achieve animation effects) copy the Code <ul class = "phones"> <li ng-repeat = "phone in phones | filter: query | orderBy: orderProp "class =" thumbnail phone-listing "> <a href =" #/phones/{phone. id }}" class = "thumb"> </a> <a href = "#/phones/{phone. id }}" >{{ phone. name }}</a> <p >{{ phone. snippet }}</p> </Li> </ul> copy the code app/css/animations.css copy the code. phone-listing.ng-enter ,. phone-listing.ng-leave ,. phone-listing.ng-move {-webkit-transition: 0.5 s linear all;-moz-transition: 0.5 s linear all;-o-transition: 0.5 s linear all; transition: 0.5 s linear all ;}. phone-listing.ng-enter ,. phone-listing.ng-move {opacity: 0; height: 0; overflow: hidden ;}. phone-listing.ng-move.ng-move-active ,. phone-listing.ng-enter.n G-enter-active {opacity: 1; height: 120px ;}. phone-listing.ng-leave {opacity: 1; overflow: hidden ;}. phone-listing.ng-leave.ng-leave-active {opacity: 0; height: 0; padding-top: 0; padding-bottom: 0;} copy the code here to locate the element through the class, so when is the class created? Ng-enter class is mainly used to add a new mobile phone and render it to the page. ng-move class is mainly used when an element is moved. ng-leave class is mainly used when it is deleted. the addition and deletion of the mobile phone list depend on the ng-repeat command. For example, if data is filtered, the mobile phone list will appear in the list dynamically. starting class indicates an animation to be started. active class indicates an animation to be ended. In our example above, the height of the element changes from 0 to 120 pixels. When the mobile phone is added and removed, there is also a fade-in and fade-out effect, all of which are implemented by CSS transitions (CSS converter. CSS transitions and CSS animations have good support for most mainstream browsers currently. Apart from IE 9 and earlier versions, you can try basic Javascript animation if you want some animation effects. ngViewapp/index.html. <div class = "view-container"> <div ng-view class = "view-frame"> </div> With this change, the ng-view directive is nested inside a parent element with a view-container CSS class. this class adds aposition: relative style so that the positioning of the ng-view is relative to this parent as it animates transitions. here ng-view is used to replace ng-repeat. Here, the ng-view command is nested into a view-container CSS class) A relative path is added so that the animation effect can be displayed dynamically. the specific implementation of the animation is as follows: app/css/animations.css. copy the code. view-container {position: relative ;}. view-frame.ng-enter ,. the view-frame.ng-leave {background: white; position: absolute; top: 0; left: 0; right: 0 ;}. view-frame.ng-enter {-webkit-animation: 0.5 s fade-in;-moz-animation: 0.5 s fade-in;-o-animation: 0.5 s fade-in; animation: 0.5 s fade-in; z-index: 100 ;}. view-frame.ng-leave {-webkit-animation: 0.5 s fade-out;-moz-animation: 0.5 s fade-out;-o-animation: 0.5 s fade-out; animation: 0.5 s fade-out; z-index: 99 ;}@ keyframes fade-in {from {opacity: 0 ;}to {opacity: 1 ;}} @-moz-keyframes fade-in {from {opacity: 0 ;}to {opacity: 1 ;}@-webkit-keyframes fade-in {from {opacity: 0 ;} to {opacity: 1 ;}@ keyframes fade-out {from {opacity: 1 ;}to {opacity: 0 ;}} @-moz-keyframes fade-out {from {opacity: 1 ;}to {opacity: 0 ;}@-webkit-keyframes fade-out {from {opacity: 1 ;} to {opacity: 0 ;}} copy the code using ngClass combined with Javascript For animation effects app/partials/phone-detail.html copy the Code <div class = "phone-images"> </div>