angularjs - 为什么 ng-style 最初不适用于 css 转换？

Question

我正在尝试通过向跨度添加类和宽度或高度样式来创建缩放效果。

<span ng-class="fat_or_tall(this)"><figure><img ng-style="set_ratio(this)" draggable="true" class="thumb" id="{{tablet.created}}" title="{{ tablet.title }}" data-ng-src="{{ tablet.src }}" /></figure></span>

它在我刷新后的第一页上工作，但是当我点击其他选项卡时，它只是在大小之间跳跃，就好像 css 转换不存在一样。如果我检查一下，我发现有时样式已经呈现，但有时它们没有。在我单击选项卡并访问每个选项卡后，缩放工作正常。为什么它在第一次尝试时不起作用，我该如何解决？

上面的第一张图片注意到没有样式，并且过渡不起作用，但是在我第二次单击选项卡（第二张图片）后，样式确实显示并且过渡效果很好。

这里： http: //jsfiddle.net/U3pVM/23506/ （如果你点击刷新它不会，但如果你点击运行它会。样式不会渲染。为什么？）

function TodoCtrl($scope) {
		$scope.tablet = {} 

    $scope.tablet.title = 'help'
    $scope.tablet.created = Date.now()
    $scope.tablet.src = 'http://tallclub.co.uk/wp-content/uploads/2011/04/Tall-Person-1.png'
    
		$scope.set_ratio = function (it) { //Find ratio and return style so that it can be used for zoom effect. 
    
        console.log(it)
        var img = new Image();  
        img.src = it.tablet.src;
        console.log(it.tablet)

        if(img.height>img.width){
            var h = 300*(img.height/img.width)+'px'     
            return {
                "height": h
            }   
        }else{
            var w = 300*(img.width/img.height)+'px'     
            return {
                "width":w 
            }       
        }
    }  
}

function TodoCtrlTwo($scope) {
		$scope.tablet = {} 

    $scope.tablet.title = 'help'
    $scope.tablet.created = Date.now()
    $scope.tablet.src = 'http://tallclub.co.uk/wp-content/uploads/2011/04/Tall-Person-1.png'
    
		$scope.set_ratio = function (it) { //Find ratio and return style so that it can be used for zoom effect. 
    
        console.log(it)
        var img = new Image();  
        img.src = it.tablet.src;
        console.log(it.tablet)

        if(img.height>img.width){
            var h = 300*(img.height/img.width)+'px'     
            return {
                "height": h
            }   
        }else{
            var w = 300*(img.width/img.height)+'px'     
            return {
                "width":w 
            }       
        }
    }  
}

.taller img  {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

}
.taller img:hover  {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

    height: 300px !important;
}  

figure  {
	width: 300px;
	height: 300px;
	
	//height: 200px;
	margin: 1em;
	padding: 0;
	background: #fff;
	overflow: hidden;
	border: 1px solid #222;
	
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<div ng-app>
  <h2>ARGH</h2>
  <div ng-controller="TodoCtrl">
<span class="taller"><figure><img ng-style="set_ratio(this)" draggable="true" class="thumb" id="{{tablet.created}}" title="{{ tablet.title }}" data-ng-src={{tablet.src}} /></figure></span>

  </div>
   <div ng-controller="TodoCtrlTwo">
<span class="taller"><figure><img ng-style="set_ratio(this)" draggable="true" class="thumb" id="{{tablet.created}}" title="{{ tablet.title }}" data-ng-src={{tablet.src}} /></figure></span>

  </div> 
</div>

刷新页面并单击运行代码片段，然后将鼠标悬停在上面。图像会跳跃。然后再次单击运行代码片段并将鼠标悬停在上面。会有一个平稳的过渡。这是为什么？

Answer 1

解决方案1：

工作演示

在第一次加载图像时，图像width和height图像都是0. 所以else块的代码被执行并返回NaNpx。

详细地：

var w = 300*(img.width/img.height)+'px' 
var w = 300*(0/0)+'px'  // As img.width = 0, img.height = 0 
var w = 300*(NaN)+'px'
var w = NaNpx

要解决此问题，请设置图像的初始高度：

.taller img  {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    height: 500px;
}

解决方案2：

您可以在两者中添加以下if块controller。

if(img.height===0 && img.width ===0){
            var h = '500px';     
            return {
                "height": h
            }
    }

工作演示

希望能解决你的问题。

Answer 2

尝试这个。创建 $scope.tablet ={}; object first.and 将 ng-class 更改为 span 标签的 class。

var app = angular.module("app",[])
app.controller('ctrl',['$scope', function($scope){
   $scope.tablet ={};
  $scope.tablet.title = 'help';
    $scope.tablet.created = Date.now();;
    $scope.tablet.src = 'http://tallclub.co.uk/wp-content/uploads/2011/04/Tall-Person-1.png'
    
		$scope.set_ratio = function (it) { //Find ratio and return style so that it can be used for zoom effect. 
    
        console.log(it);
        var img = new Image();  
        img.src = it.tablet.src;
        console.log(it.tablet)

        if(img.height>img.width){
            var h = 300*(img.height/img.width)+'px'     
            return {'height':h};
        }else{
            var w = 300*(img.width/img.height)+'px'     
            return {
                'width':w 
            }       
        }
    }

}]);

.taller img  {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

}
.taller img:hover  {
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

    height: 300px !important;
}  

figure  {
	width: 300px;
	height: 300px;
	
	//height: 200px;
	margin: 1em;
	padding: 0;
	background: #fff;
	overflow: hidden;
	border: 1px solid #222;
	
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div >
   <h2>ARGH</h2>
     <div>
      <span class="taller">
         <figure>
           <img ng-mouseenter="set_ratio(this)" draggable="true" class="thumb" id="{{tablet.created}}" title="{{ tablet.title }}" data-ng-  src={{tablet.src}} />
         </figure>
      </span>
   </div>
  </div>
</div>

Answer 3

答案可以在这里找到。

Angular JS 指令是否有渲染后回调？

我只是将它包装在 $timeout 中

$timeout(function(){

    $scope.set_ratio = function (it) { //Find ratio and return style so that it can be used for zoom effect. 
        var img = new Image();  
        img.src = it.tablet.src;
        console.log(it.tablet)

        if(img.height>img.width){
            var h = 300*(img.height/img.width)+'px'     
            return {
                "height": h
            }   
        }else{
            var w = 300*(img.width/img.height)+'px'     
            return {
                "width":w 
            }       
        }
    }

}, 50)