在这里有角的新手,我正在尝试创建一个按钮,单击该按钮后,其中的图标就会旋转360度。到目前为止,我已经旋转了,但是它旋转了整个按钮,而不仅仅是元素。当单击按钮时,它看起来只是旋转“蓝色方块”。 (是的,我知道到目前为止,由于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

最佳答案

单击蓝框时只有蓝框旋转


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

关于javascript - 顺时针旋转Icon 360度angularjs,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30583215/

10-12 12:28
查看更多