1.基本完成动画自定义逻辑

Author: 123

app/index.html

@@ -23,6 +23,7 @@
  <link rel="stylesheet" href="bower_components/highlightjs/styles/default.css" />
  <link rel="stylesheet" href="bower_components/select2/select2.css" />
  <link rel="stylesheet" href="bower_components/nvd3/src/nv.d3.css" />
+ <link rel="stylesheet" href="bower_components/animate.css/animate.css" />
  <!-- endbower -->
  <!-- endbuild -->
  <!-- build:css({.tmp,app}) styles/main.css -->

app/scripts/config/authors.js

@@ -30,5 +30,10 @@ angular.module('ngShowcaseApp').constant('authors', [
  name: 'why520crazy',
  email: 'why520crazy@163.com',
  github: 'https://github.com/why520crazy'
+ },
+ {
+ name:'Leonardo',
+ email:'wang861622836@163.com',
+ github:'https://github.com/wleonardo'
  }
 ]);

app/scripts/config/nav-data.js

@@ -293,7 +293,9 @@ angular.module('ngShowcaseApp').constant('NavData', [
  },
  {
  state: 'animation.custom',
- label: '自定义'
+ label: '自定义',
+ authors: ['Leonardo'],
+ progress: 30
  }
  ]
  },

app/scripts/controllers/animation/choiceitems.json

@@ -0,0 +1,16 @@
+[{"r1": [{ 
+"temLink":"00", 
+"imageLink":"", 
+"itemPrice":"", 
+"itemLink":""," 
+itemName":"" 
+}] 
+}
+{ "r2": [ {
+"temLink":"10",
+"imageLink":"",
+"itemPrice":"",
+"itemLink":"",
+"itemName":""}] 
+} 
+] 

app/scripts/controllers/animation/custom.js

@@ -1,5 +1,11 @@
 'use strict';
 
-angular.module('ngShowcaseApp').controller('ctrl.animation.custom', function ($scope) {
+angular.module('ngShowcaseApp').controller('ctrl.animation.custom', function ($scope,$http) {
  var vm = $scope.vm = {};
+ $scope.choice = "";
+ $scope.classname = "";
+ $scope.choiceitems = {};
+ $scope.change = function(){
+ $scope.classname = $scope.choice+" "+"animated";
+ };
 });

app/views/animation/choiceitems.json

@@ -0,0 +1,16 @@
+[{"r1": [{ 
+"temLink":"00", 
+"imageLink":"", 
+"itemPrice":"", 
+"itemLink":""," 
+itemName":"" 
+}] 
+}
+{ "r2": [ {
+"temLink":"10",
+"imageLink":"",
+"itemPrice":"",
+"itemLink":"",
+"itemName":""}] 
+} 
+] 

app/views/animation/custom.css

@@ -0,0 +1,8 @@
+.title{
+ color: #f35626;
+ background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ margin-bottom: 20px;
+ line-height: 50px;
+}

app/views/animation/custom.html

@@ -1 +1,23 @@
-<div ui-view></div>
+<link rel="stylesheet" href="views/animation/custom.css"/>
+<center><h1 class="title {{classname}}">AngularJs</h1></center>
+ <select class="form-control" ng-model="choice" ng-change="change()">
+ <option>bounce</option>
+ <option>flash</option>
+ <option>pulse</option>
+ <option>rubberBand</option>
+ <option>shake</option>
+ </select>
+
+
+
+<h3>说明</h3>
+<ul>
+ <li>
+ 采用了第三方css类库Animate.css，具体信息以及参数请参考
+ <a href="http://daneden.github.io/animate.css/" target="_blank">官方文档</a>
+ 。
+ </li>
+ <li>
+ 通过ng-model来实时修改classname
+ </li>
+</ul>

app/views/home/about.html

@@ -25,7 +25,7 @@
  </tr>
  <tr>
  <th>程序员</th>
- <td>雪狼, Ken, zxsoft, why520crazy, playing，天猪</td>
+ <td>雪狼, Ken, zxsoft, why520crazy, playing，天猪,Leonardo</td>
  <td>只列出有提交的部分，随时增补</td>
  </tr>
  <tr>

bower.json

@@ -22,7 +22,8 @@
  "angular-tree-repeat": "~0.0.1",
  "d3": "~3.4.8",
  "angularjs-nvd3-directives": "~0.0.7",
- "highcharts-release": "~3.0.7"
+ "highcharts-release": "~3.0.7",
+ "animate.css":"~3.3.0"
  },
  "devDependencies": {
  "angular-mocks": "1.2.15",