BLOOK

GP's blog and book

angular实现列表逐条动画指令

效果演示

title of the picture

自定义指令代码

1
2
3
4
5
6
7
8
9
10
11
12
.directive('reanimate', ()=>{ // 列表渐进动画
return {
restrict: 'A',
scope: {
index: '@',
},
link(scope, element) {
element.css({'transition-delay':0.05 * scope.index+'s'})
}
}
})

指令调用

1
tr.slide-right(ng-repeat='item in vm.saleList' reanimate index='{{$index}}')

slide-right说明

此class来自ng-animation.styl
贴出部分代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
.slide-right
easingTimingFunction()
&.ng-enter
transform(translateX(60px))
transitionDuration(250ms)
opacity 0
&.ng-enter-active
transform(translateX(0))
opacity 1
&.ng-leave
transform(translateX(0))
transitionDuration(250ms)
opacity 1
&.ng-leave-active
transform(translateX(60px))
opacity 0
// Hide
&.ng-hide-add
transform(translateX(0))
transitionDuration(250ms)
opacity:1
&.ng-hide-add.ng-hide-add-active
transform(translateX(60px))
opacity:0
// Show
&.ng-hide-remove
transform(translateX(60px))
transitionDuration(250ms)
display:block!important
opacity:0
&.ng-hide-remove.ng-hide-remove-active
transform(translateX(0))
opacity:1