Question

Angular新手在这里，我正在尝试创建一个按钮，一旦点击就会有一个旋转360度的图标。截至目前，我有旋转，但它旋转整个按钮而不是元素。想要让它旋转＆＃34;蓝色正方形＆＃34;单击按钮时。（是的，我知道截至目前我只是按钮本身旋转，因为按钮上的按键是没有，而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

这是父母寻找孩子的简单答案。

对于将来寻找此答案的任何人，我将所有.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浏览器

Answer 2

单击蓝框
时仅蓝色框旋转

 <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;
  };

将图标顺时针旋转360度角度

2 个答案: