在这里有角的新手,我正在尝试创建一个按钮,单击该按钮后,其中的图标就会旋转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/