A fool with a tool is still a fool but more powerful!

—— unknow

分享angularjs的幻灯滑动实现

2015-22-07

项目中只用到了angularjs. 很多东西都要自己写。所以分享一个简单的幻灯实现。

javascript part:


directive('cardSlide', ['$animate', function($animate) {
  return {
        restrict: 'A',
        scope: {
            hiden: '=cardSlide',
            done: '&onDone'
        },
        link: function(scope, element, attrs) {
            scope.$watch('hiden', function (value) {
                if (value) {
                    var direction = value === 'left' ? 'slideOutLeft' : 'slideOutRight'
                    $animate['addClass'](element,  direction).then(function () {
                        scope.done()
                        angular.element(element).removeClass(direction)
                        scope.hiden = undefined;
                    })
                }
            });
        }
    }
}]);

html part:


    <div class="slide-items">
  <div class="slide-item animated" ng-repeat="banner in banners" card-slide="hideme" on-done="onDone(banner)">
    <img ng-src="{{banner.img_url}}" style="{z-index: {{99 - $index}}}" ng-click="hideme='left'" ng-swipe-left="hideme ='left'" ng-swipe-right="hideme='right'" />
  </div>
</div>

css part:


.slide-items {
    width: 100%;
    position: relative;
}
.slide-item img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

完了 就这么简单, 还有要引入 http://daneden.me/animate 的animate.css