顺时针旋转图标360度

Rotate Icon 360 degrees clockwise angularjs

本文关键字：360度 图标 旋转 顺时针      更新时间：2023-09-26

Angular新手在这里，我试图创建一个按钮，将有一个图标里面旋转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;
     };
}
演示

这是一个寻找孩子的父母的简单回答。

对于将来寻找这个答案的任何人，我将所有。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;

};

Chrome 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;
  };
相关文章：