菜单项的离子摇动动画
ionic shake animation of an menu item
为什么摇动动画对我的菜单项(有计数)不起作用?
我有以下菜单模板:
<li class="item" ng-repeat="(key, value) in menuItems">
<a ng-click="navigateTo(value.title)" class="menu-icon {{value.title | lowercase}}" ng-class="{noitems: value.count==0}" shake-me>
{{value.title}}
<span ng-show="value.count==0" class="status">No items available in {{value.title | lowercase}}</span>
</a>
</li>
指令 shake-me 看起来像:
angular
.module('myApp')
.directive('shakeMe', ['$animate', function($animate) {
return {
restrict: 'A',
link: function(scope, element, attrs, form) {
element.on('click', function() {
scope.$apply(function() {
if (element.hasClass('noitems')) {
$animate.addClass(element, 'shake', function() {
$animate.removeClass(element, 'shake');
});
}
});
});
}
};
}]);
和摇动动画(css3):
@keyframes shake {
0% {transform: translateX(0);}
12.5% {transform: translateX(-6px) rotateY(-5deg)}
37.5% {transform: translateX(5px) rotateY(4deg)}
62.5% {transform: translateX(-3px) rotateY(-2deg)}
87.5% {transform: translateX(2px) rotateY(1deg)}
100% {transform: translateX(0)}
}
.shake {
-webkit-animation: shake 400ms ease-in-out;
animation: shake 400ms ease-in-out;
}
提及:
- 添加了抖动 class 但由于某些原因动画无法正常工作(在 iOS 8+、Safari 上)
$animate.addClass(element, 'shake', function() {
$animate.removeClass(element, 'shake'); //this part is never called
});
编辑
我用相同的场景创建了 a blank demo,它可能有助于更快地确定问题
自版本 1.3.0-RC.0 起,$animate
使用 promises 而不是回调。
更改为:
element.on('click', function() {
scope.$apply(function() {
$animate.addClass(element, 'shake').then(function() {
element.removeClass('shake');
});
});
});
在您的演示中,您使用的是 .shake.ng-enter
,它应该只是 .shake
。
此外,您需要添加一些额外的 CSS 以使其在 Safari 中工作:
@keyframes shake {
0% {transform: translateX(0);}
12.5% {transform: translateX(-6px) rotateY(-5deg)}
37.5% {transform: translateX(5px) rotateY(4deg)}
62.5% {transform: translateX(-3px) rotateY(-2deg)}
87.5% {transform: translateX(2px) rotateY(1deg)}
100% {transform: translateX(0)}
}
@-webkit-keyframes shake {
0% {-webkit-transform: translateX(0);}
12.5% {-webkit-transform: translateX(-6px) rotateY(-5deg)}
37.5% {-webkit-transform: translateX(5px) rotateY(4deg)}
62.5% {-webkit-transform: translateX(-3px) rotateY(-2deg)}
87.5% {-webkit-transform: translateX(2px) rotateY(1deg)}
100% {-webkit-transform: translateX(0)}
}
.shake {
-webkit-animation: shake 400ms ease-in-out;
animation: shake 400ms ease-in-out;
}
为什么摇动动画对我的菜单项(有计数)不起作用?
我有以下菜单模板:
<li class="item" ng-repeat="(key, value) in menuItems">
<a ng-click="navigateTo(value.title)" class="menu-icon {{value.title | lowercase}}" ng-class="{noitems: value.count==0}" shake-me>
{{value.title}}
<span ng-show="value.count==0" class="status">No items available in {{value.title | lowercase}}</span>
</a>
</li>
指令 shake-me 看起来像:
angular
.module('myApp')
.directive('shakeMe', ['$animate', function($animate) {
return {
restrict: 'A',
link: function(scope, element, attrs, form) {
element.on('click', function() {
scope.$apply(function() {
if (element.hasClass('noitems')) {
$animate.addClass(element, 'shake', function() {
$animate.removeClass(element, 'shake');
});
}
});
});
}
};
}]);
和摇动动画(css3):
@keyframes shake {
0% {transform: translateX(0);}
12.5% {transform: translateX(-6px) rotateY(-5deg)}
37.5% {transform: translateX(5px) rotateY(4deg)}
62.5% {transform: translateX(-3px) rotateY(-2deg)}
87.5% {transform: translateX(2px) rotateY(1deg)}
100% {transform: translateX(0)}
}
.shake {
-webkit-animation: shake 400ms ease-in-out;
animation: shake 400ms ease-in-out;
}
提及:
- 添加了抖动 class 但由于某些原因动画无法正常工作(在 iOS 8+、Safari 上)
$animate.addClass(element, 'shake', function() { $animate.removeClass(element, 'shake'); //this part is never called });
编辑
我用相同的场景创建了 a blank demo,它可能有助于更快地确定问题
自版本 1.3.0-RC.0 起,$animate
使用 promises 而不是回调。
更改为:
element.on('click', function() {
scope.$apply(function() {
$animate.addClass(element, 'shake').then(function() {
element.removeClass('shake');
});
});
});
在您的演示中,您使用的是 .shake.ng-enter
,它应该只是 .shake
。
此外,您需要添加一些额外的 CSS 以使其在 Safari 中工作:
@keyframes shake {
0% {transform: translateX(0);}
12.5% {transform: translateX(-6px) rotateY(-5deg)}
37.5% {transform: translateX(5px) rotateY(4deg)}
62.5% {transform: translateX(-3px) rotateY(-2deg)}
87.5% {transform: translateX(2px) rotateY(1deg)}
100% {transform: translateX(0)}
}
@-webkit-keyframes shake {
0% {-webkit-transform: translateX(0);}
12.5% {-webkit-transform: translateX(-6px) rotateY(-5deg)}
37.5% {-webkit-transform: translateX(5px) rotateY(4deg)}
62.5% {-webkit-transform: translateX(-3px) rotateY(-2deg)}
87.5% {-webkit-transform: translateX(2px) rotateY(1deg)}
100% {-webkit-transform: translateX(0)}
}
.shake {
-webkit-animation: shake 400ms ease-in-out;
animation: shake 400ms ease-in-out;
}