Skip to content

Commit 01604a2

Browse files
123123
committed
增加了animation
1 parent b8d0ba8 commit 01604a2

File tree

5 files changed

+235
-67
lines changed

5 files changed

+235
-67
lines changed

‎app/scripts/controllers/animation/choiceitems.json‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1-
{"Attention Seekers":["bounce","flash","pulse","rubberBand","shake","swing","tada","wobble","jello"],
2-
"Bouncing Entrances":["bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp"],
3-
"Bouncing Exits":["bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp"],
4-
"Fading Entrances":["fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig"],
5-
"Fading Exits":["fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig"],
6-
"Flippers":["flip","flipInX","flipInY","fadeOutLeft","flipOutX","flipOutY"],
7-
"Lightspeed":["lightSpeedIn","lightSpeedOut"],
8-
"Rotating Entrances":["rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight"],
9-
"Rotating Exits":["rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight"],
10-
"Sliding Entrances":["slideInUp","slideInDown","slideInLeft","slideInRight"],
11-
"Sliding Exits":["slideOutUp","slideOutDown","slideOutLeft","slideOutRight"],
12-
"Zoom Entrances":["zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp"],
13-
"Zoom Exits":["zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp"],
14-
"Specials":["hinge","rollIn","rollOut"]}
1+
[{
2+
"group": "Attention Seekers",
3+
"value":"bounce",
4+
"label":"bounce"
5+
},
6+
{
7+
"group": "Attention Seekers",
8+
"value": "flash",
9+
"label": "flash"
10+
}]

‎app/scripts/controllers/animation/custom.js‎

Lines changed: 137 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,145 @@
11
'use strict';
22

3-
angular.module('ngShowcaseApp').controller('ctrl.animation.custom', function ($scope,$http,$timeout) {
4-
var vm = $scope.vm = {};
5-
$scope.choice = "";
6-
$scope.classname = "";
7-
$scope.choiceitems = {};
8-
$http({method: 'GET', url: 'scripts/controllers/animation/choiceitems.json',cache:true}).
3+
angular.module('ngShowcaseApp').value('animate_param', {
4+
opacity: "1",
5+
left: "0",
6+
top: "0",
7+
time: "1000"
8+
});
9+
10+
angular.module('ngShowcaseApp').controller('ctrl.animation.custom', function($scope, $http, $timeout, animate_param) {
11+
var vm = $scope.vm = {};
12+
$scope.choice = "";
13+
$scope.classname = "";
14+
$scope.choiceitems = {};
15+
var vm = $scope.vm = {};
16+
vm.items = ['item1', 'item2'];
17+
vm.itemId = 3;
18+
// user.opacity = $scope.param_opacity;
19+
20+
vm.addItem = function() {
21+
vm.items.push('item' + vm.itemId);
22+
vm.itemId++;
23+
};
24+
25+
vm.delItem = function(index) {
26+
vm.items.splice(index, 1);
27+
};
28+
$http({
29+
method: 'GET',
30+
url: 'scripts/controllers/animation/choiceitems.json',
31+
cache: true
32+
}).
933
success(function(data, status, headers, config) {
10-
var choices = angular.fromJson(data);
11-
$scope.choiceitems = choices;
34+
var choices = angular.fromJson(data);
35+
$scope.choiceitems = choices;
1236

1337
}).
1438
error(function(data, status, headers, config) {
15-
console.log(data);
39+
console.log(data);
1640
});
17-
$scope.change = function(){
18-
$scope.classname = $scope.choice+" "+"animated";
19-
var timer = $timeout(function() {$scope.classname = "";$timeout.cancel(timer);},1500);
20-
};
41+
$scope.change = function() {
42+
$scope.classname = $scope.choice + " " + "animated";
43+
};
44+
$scope.paramchange = function() {
45+
animate_param.opacity = $scope.param_opacity;
46+
animate_param.left = $scope.param_left;
47+
animate_param.top = $scope.param_top;
48+
animate_param.time = $scope.param_time;
49+
}
50+
});
51+
52+
53+
54+
55+
angular.module('ngShowcaseApp').animation('.list-group-item',
56+
function(animate_param) {
57+
return {
58+
enter: function(element, done) {
59+
console.log(animate_param);
60+
element.css('opacity', animate_param.opacity);
61+
element.css('left', animate_param.left + "px");
62+
element.css('top', animate_param.top + "px");
63+
jQuery(element).animate({
64+
opacity: 1,
65+
left: '0px',
66+
top: '0px'
67+
}, (animate_param.time > 999) ? parseInt(animate_param.time) : 1000, done);
68+
return function(isCancelled) {
69+
if (isCancelled) {
70+
jQuery(element).stop();
71+
}
72+
}
73+
},
74+
leave: function(element, done) {
75+
element.css('opacity', 1);
76+
jQuery(element).animate({
77+
opacity: 0
78+
}, done);
79+
return function(isCancelled) {
80+
if (isCancelled) {
81+
jQuery(element).stop();
82+
}
83+
}
84+
}
85+
};
86+
87+
}
88+
);
89+
90+
91+
/*
92+
myModule.animation('.repeated-item', function() {
93+
return {
94+
enter : function(element, done) {
95+
element.css('opacity',0);
96+
jQuery(element).animate({
97+
opacity: 1
98+
}, done);
99+
100+
// optional onDone or onCancel callback
101+
// function to handle any post-animation
102+
// cleanup operations
103+
return function(isCancelled) {
104+
if(isCancelled) {
105+
jQuery(element).stop();
106+
}
107+
}
108+
},
109+
leave : function(element, done) {
110+
element.css('opacity', 1);
111+
jQuery(element).animate({
112+
opacity: 0
113+
}, done);
114+
115+
// optional onDone or onCancel callback
116+
// function to handle any post-animation
117+
// cleanup operations
118+
return function(isCancelled) {
119+
if(isCancelled) {
120+
jQuery(element).stop();
121+
}
122+
}
123+
},
124+
move : function(element, done) {
125+
element.css('opacity', 0);
126+
jQuery(element).animate({
127+
opacity: 1
128+
}, done);
129+
130+
// optional onDone or onCancel callback
131+
// function to handle any post-animation
132+
// cleanup operations
133+
return function(isCancelled) {
134+
if(isCancelled) {
135+
jQuery(element).stop();
136+
}
137+
}
138+
},
139+
140+
// you can also capture these animation events
141+
addClass : function(element, className, done) {},
142+
removeClass : function(element, className, done) {}
143+
}
21144
});
145+
*/

‎app/views/animation/choiceitems.json‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
1-
[{"r1": [{
2-
"temLink":"00",
3-
"imageLink":"",
4-
"itemPrice":"",
5-
"itemLink":"","
6-
itemName":""
7-
}]
8-
}
9-
{ "r2": [ {
10-
"temLink":"10",
11-
"imageLink":"",
12-
"itemPrice":"",
13-
"itemLink":"",
14-
"itemName":""}]
15-
}
16-
]
1+
{"Attention Seekers":["bounce","flash","pulse","rubberBand","shake","swing","tada","wobble","jello"],
2+
"Bouncing Entrances":["bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp"],
3+
"Bouncing Exits":["bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp"],
4+
"Fading Entrances":["fadeIn","fadeInDown","fadeInDownBig","fadeInLeft","fadeInLeftBig","fadeInRight","fadeInRightBig","fadeInUp","fadeInUpBig"],
5+
"Fading Exits":["fadeOut","fadeOutDown","fadeOutDownBig","fadeOutLeft","fadeOutLeftBig","fadeOutRight","fadeOutRightBig","fadeOutUp","fadeOutUpBig"],
6+
"Flippers":["flip","flipInX","flipInY","fadeOutLeft","flipOutX","flipOutY"],
7+
"Lightspeed":["lightSpeedIn","lightSpeedOut"],
8+
"Rotating Entrances":["rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight"],
9+
"Rotating Exits":["rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight"],
10+
"Sliding Entrances":["slideInUp","slideInDown","slideInLeft","slideInRight"],
11+
"Sliding Exits":["slideOutUp","slideOutDown","slideOutLeft","slideOutRight"],
12+
"Zoom Entrances":["zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp"],
13+
"Zoom Exits":["zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp"],
14+
"Specials":["hinge","rollIn","rollOut"]}
15+
16+
[{
17+
"group": "Attention Seekers",
18+
"value":"bounce",
19+
"value":"label"
20+
},
21+
{
22+
"group": "Attention Seekers",
23+
"value": "flash"
24+
"label": "flash"
25+
}]

‎app/views/animation/custom.css‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,23 @@
1-
.title{
2-
color: #f35626;
3-
background-image: -webkit-linear-gradient(92deg,#f35626,#feab3a);
4-
-webkit-background-clip: text;
5-
-webkit-text-fill-color: transparent;
6-
margin-bottom: 20px;
7-
line-height: 50px;
8-
}
1+
.title {
2+
color: #f35626;
3+
background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
4+
-webkit-background-clip: text;
5+
-webkit-text-fill-color: transparent;
6+
margin-bottom: 20px;
7+
line-height: 50px;
8+
text-align: center;
9+
}
10+
11+
.animate-form>.row {
12+
margin-bottom: 10px;
13+
}
14+
15+
.animate-form span {
16+
line-height: 34px;
17+
padding-left: 15px;
18+
text-align: center;
19+
}
20+
21+
.form-control {
22+
width: 25%;
23+
}

‎app/views/animation/custom.html‎

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,43 @@
1-
<link rel="stylesheet" href="views/animation/custom.css"/>
2-
<center><h1 class="title {{classname}}">AngularJs</h1></center>
3-
<select class="form-control" ng-model="choice" ng-change="change()">
4-
<optgroup ng-repeat="(name, item) in choiceitems" label={{name}} >
5-
<option ng-repeat="its in item">{{its}}</option>
6-
</optgroup>
7-
</select>
8-
1+
<link rel="stylesheet" href="views/animation/custom.css" />
2+
<h1 class="title {{classname}}">AngularJs</h1>
3+
<select class="form-control" ng-model="choice" ng-change="change()" ng-options="value.value as value.label group by value.group for value in choiceitems">
4+
<option value="">请选择</option>
5+
</select>
6+
<h1 class="title design">AngularJs</h1>
7+
<ul class="list-group">
8+
<li class="list-group-item repeat" ng-repeat="item in vm.items">
9+
{{item}}
10+
<button type="button" class="close" ng-click="vm.delItem($index)">&times;</button>
11+
</li>
12+
</ul>
13+
<div class="row animate-form">
14+
<div class="row">
15+
<span class="col-sm-2">透明度</span>
16+
<input type="text" class="form-control col-sm-6" placeholder="请输入初始透明度" ng-model="param_opacity" ng-change="paramchange()">
17+
<span class="col-sm-2">left</span>
18+
<input type="text" class="form-control col-sm-6" placeholder="请输入初始left值" ng-model="param_left
19+
" ng-change="paramchange()">
20+
</div>
21+
<div class="row">
22+
<span class="col-sm-2">top</span>
23+
<input type="text" class="form-control col-sm-6" placeholder="请输入初始top值" ng-model="param_top" ng-change="paramchange()">
24+
<span class="col-sm-2">时间</span>
25+
<input type="text" class="form-control col-sm-6" placeholder="请输入初始动画持续时间" ng-model="param_time" ng-change="paramchange()">
26+
</div>
27+
</div>
28+
<button class="btn btn-default mmm" ng-click="vm.addItem()">添加一条</button>
929
<h3>说明</h3>
1030
<ul>
11-
<li>
12-
采用了第三方css类库Animate.css，具体信息以及参数请参考
13-
<a href="http://daneden.github.io/animate.css/" target="_blank">官方文档</a>
14-
。
15-
</li>
16-
<li>
17-
通过ng-model来实时修改classname
18-
</li>
31+
<li>
32+
采用了第三方css类库Animate.css，具体信息以及参数请参考
33+
<a href="http://daneden.github.io/animate.css/" target="_blank">官方文档</a> 。
34+
</li>
35+
<li>
36+
通过ng-model来实时修改classname
37+
</li>
1938
</ul>
39+
<!--
40+
<optgroup ng-repeat="(name, item) in choiceitems" label={{name}} >
41+
<option ng-repeat="its in item">{{its}}</option>
42+
</optgroup>
43+
-->

0 commit comments

Comments
 (0)