顺时针旋转图标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

回答

相关问题