javascript - 温泉 : create right to left slide button

Question

ons-buttons 上有参数“animation”和“should-spin”，但我如何编辑代码以便在旋转位置显示自定义 div？我不想要旋转，只想要按钮显示“A”，然后 div 向左滑动并出现“B”。

我完全是 Onsen.ui 的新手，所以我不知道从哪里开始。

Answer 1

需要修改模板和css。

我们可以获取 ons-button 的源代码并创建 my-button，如在这个 plunker 中所见:

http://plnkr.co/edit/j7vlIh?p=preview

用法

<my-button ng-init="spin=false;" ng-click="spin = !spin" should-spin="{{spin}}" right-label="B">
    A
</my-button>

javascript

myApp.directive('myButton', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {
            shouldSpin: '@',
            animation: '@',
            type: '@',
            disabled: '@',
            rightLabel: '@'
        },
        templateUrl: 'button_template.html',
        link: function(scope, element, attrs){
            var effectButton = element;
            var TYPE_PREFIX = "topcoat-button--";
            scope.item = {};                

            // if animation is not specified -> default is slide-left
            if(scope.animation === undefined || scope.animation === ""){
                scope.item.animation = "slide-left";
            }

            scope.$watch('disabled', function(disabled){
                if(disabled === "true"){
                    effectButton.attr('disabled', true);
                }else{
                    effectButton.attr('disabled', false);
                }
            });

            scope.$watch('animation', function(newAnimation){
                if(newAnimation){
                    scope.item.animation = newAnimation;
                }
            });

            scope.$watch('shouldSpin', function(shouldSpin){
                if(shouldSpin === "true"){
                    effectButton.attr('data-loading', true);
                }else{
                    effectButton.removeAttr('data-loading');
                }
            });
        }
    };
});

button_template.html

<button ng-class="'topcoat-button--{{type}}'" class="{{item.animation}} effeckt-button topcoat-button no-select">
    <span class="label" ng-transclude></span>
    <span class="right-label">{{rightLabel}}</span>
</button>

CSS

.effeckt-button > .right-label {
  transition-property: padding, opacity, left, right, top, bottom, margin;
  transition-duration: 500ms;
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);  
}

.effeckt-button > .right-label {
  opacity: 0;
  position: absolute;
}


.effeckt-button.slide-left > .right-label {
  left: 100%;  
}

.effeckt-button.slide-left[data-loading] > .label {
  opacity: 0;
  left: -100%;
}

.effeckt-button.slide-left[data-loading] > .right-label {
  opacity: 1;
  left: 50%;
}