角度隨機的CSS旋轉總是移動

我想有一個隨機的CSS旋轉的IMG。我成功地做到這一點，但是當你將鼠標移到該leaftlet圖，IMG總是轉圈：角度隨機的CSS旋轉總是移動

如何設置一個隨機的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>

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

來源

2015-01-07 Jo Pfeffer

也許分配呼叫的響應getRandRot在你的控制器中的價值？

使用class={{ getRandRot() }}，你要創建一個綁定到getRandRot將被稱爲內各消化階段

該做的伎倆：

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>

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是p用角度動態設置元素上的類。

希望這會有所幫助。

來源

2015-01-07 16:53:20

它幾乎工作。當我查看站點源代碼時，ng-class被設置爲ng-class =「rotate10」。但輪換沒有發生。也不是當我直接寫ng-class =「rotate10」的時候。但是當我寫班=「旋轉10」的旋轉工程...任何想法？ –

我不確定我是否正確理解你的問題。 [這個小提琴]（http://jsfiddle.net/h3xr4kwu/1/）包含我認爲你的問題的解決方案。與你的期望有什麼不同？ –

角度隨機的CSS旋轉總是移動

回答

相關問題