順時針旋轉圖標360度angularjs

這裏是角度的新手，我試圖創建一個按鈕，一旦點擊就會旋轉360度內的圖標。截至目前，我有旋轉，但它旋轉整個按鈕，而不是隻是元素。只需點擊按鈕即可旋轉「藍色方塊」。（是的，我瞭解，截至目前，我只具有按鈕本身旋轉由於NG-點擊是按鈕並沒有什麼對div.box）順時針旋轉圖標360度angularjs

HTML代碼：

<button ng-controller="fullRotation" ng-click="fullRotate()">Rotate 
    <div class="box"></div> 
</button>

NG碼

var app = angular.module('app', []); 

var fullRotation = function ($scope, $element) { 
    var degrees = 360; 
    $element.css('transition', '-webkit-transform 800ms ease'); 

    $scope.fullRotate = function() { 
      $element.css('-webkit-transform', 'rotate(' + degrees + 'deg)'); 
      degrees += 360; 
    }; 
}

demo

來源

2015-06-01 user1431083

當您單擊藍色框只有藍色方塊旋轉

<button >Rotate 

    <div class="box" ng-controller="fullRotation" ng-click="fullRotate()"></div> 

    </button>

只有藍色方塊旋轉，當你點擊按鈕

$scope.fullRotate = function() { 
    console.log('im here'); 
    $element.children().css('transition', 'transform 800ms ease'); 
    $element.children().css('transform', 'rotate(' + degrees + 'deg)'); 
    degrees += 360; 
    };

另一種方法是添加過渡到按鈕的CSS

/* Styles go here */ 
.box{ 
    width: 70px; 
    height: 70px; 
    background: skyblue; 
    margin: 50px; 
    display: block; 
    transition: 800ms ease; 
} 


$scope.fullRotate = function() { 
    $element.children().css('-webkit-transform', 'rotate(' + degrees + 'deg)'); 
    degrees += 360; 
    };

來源

2015-06-01 21:15:30 Prime

謝謝你的答案，但不是我所期待的。如果按鈕本身被點擊，而不是點擊藍色框並且它會旋轉，我希望框旋轉。 – user1431083

@ user1431083檢查編輯答案。它適用於所有最新的瀏覽器。 – Prime

感謝您的更新，不知道爲什麼我不認爲已經在框上留下了過渡呼叫。感謝聰明的想法。 – user1431083

這是一個簡單的答案父母尋找他們的孩子。

爲尋找這個答案在未來我感動了所有的.css（）到fullRotate功能，並添加兒童（）

$scope.fullRotate = function() { 
    console.log('im here'); 
    $element.children().css('transition', '-webkit-transform 800ms ease'); 
    $element.children().css('-webkit-transform', 'rotate(' + degrees + 'deg)'); 
    degrees += 360;

};

demo鉻只

來源

2015-06-02 20:35:16 user1431083

順時針旋轉圖標360度angularjs

回答

相關問題