我想要一个带有随机 css 旋转的 img。我设法实现了这一点，但是当您将鼠标移到传单 map 上时，img 总是在旋转:
http://jsfiddle.net/J03rgPf/mzwwfav4/3/
我怎样才能只设置一次随机 css，这样 getRandRot 函数就不会被一次又一次地调用？
<body ng-controller="DemoController">
<leaflet center="center"></leaflet>
<div class="{{getRandRot()}}">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Surfers_at_Mavericks.jpg/320px-Surfers_at_Mavericks.jpg" />
</div>
</body>
Angular JS 代码:
var app = angular.module('demoapp',['leaflet-directive']);
app.controller('DemoController', [ '$scope', 'leafletData', function($scope, leafletData) {
angular.extend($scope, {
center: {
lat: 51.505,
lng: -0.09,
zoom: 5
}
})
$scope.getRandRot = function(){
var rotations = [ "rotate-10", "rotate-5", "rotate5", "rotate10" ];
var rand = Math.floor(Math.random() * rotations.length);
return rotations[rand];
}
}]);
CSS
.angular-leaflet-map {
width: 100%;
height: 280px;
}
.rotate-10{
-moz-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
}
.rotate-5{
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
.rotate5{
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
-webkit-transform: rotate(5deg);
}
.rotate10{
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
}
最佳答案
也许将调用 getRandRot 的响应分配给 Controller 中的值？
通过使用 class={{ getRandRot() }}，您将在 getRandRot 上创建一个绑定(bind)，它将在每个摘要阶段调用
这就是诀窍:
HTML
<body ng-controller="DemoController">
<leaflet center="center"></leaflet>
<div ng-class="randRot">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0a/Surfers_at_Mavericks.jpg/320px-Surfers_at_Mavericks.jpg" />
</div>
</body>
JS
var app = angular.module('demoapp',['leaflet-directive']);
app.controller('DemoController', [ '$scope', 'leafletData', function($scope, leafletData) {
angular.extend($scope, {
center: {
lat: 51.505,
lng: -0.09,
zoom: 5
}
})
getRandRot = function(){
var rotations = [ "rotate-10", "rotate-5", "rotate5", "rotate10" ];
var rand = Math.floor(Math.random() * rotations.length);
return rotations[rand];
}
$scope.randRot = getRandRot();
}]);
顺便说一句，ng-class 是使用 angular 在元素上动态设置类的首选方法。
希望这对您有所帮助。
关于css - Angular 随机 css 旋转总是移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27824229/