顺时针旋转图标 360 度 angularjs

Question

Angular 新手，我正在尝试创建一个按钮，点击后按钮内部会旋转 360 度。到目前为止，我已经有了旋转功能，但它会旋转整个按钮而不仅仅是元素。希望在单击按钮时让它旋转 "blue square" 。（是的，我知道现在我只是让按钮本身旋转，因为 ng-click 在按钮上，而 div.box 上没有任何内容）

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

Answer 1

only blue box rotate when you click blue box

 <button >Rotate

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

  </button>

Only blue box rotate when you click button

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

other way is to add transition to button 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;
  };

Answer 2

这是 parent 寻找他们 child 的简单答案。

对于将来寻找此答案的任何人，我将所有 .css() 移动到 fullRotate 函数中并添加了 children()

$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 Chrome 仅

顺时针旋转图标 360 度 angularjs

Rotate Icon 360 degrees clockwise angularjs

javascript

rotation

angularjs