0

クラスと幅または高さのスタイルをスパンに追加して、ズーム効果を作成しようとしています。 

<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 トランジションが存在しないかのようにサイズ間でホップします。調べてみると、スタイルがレンダリングされていることもあれば、レンダリングされていないこともあります。タブをクリックしてそれぞれにアクセスすると、ズームが正しく機能します。最初の試行で機能しないのはなぜですか?どうすれば修正できますか?

うまくいかないとき。 スタイルがないことに気づく タブをもう一度クリックすると、うまく機能します。 現在、スタイルがあることに注意してください。 上の最初の画像では、スタイルがなく、トランジションが機能しませんが、タブを 2 回クリックすると (2 番目の写真)、スタイルが表示され、トランジションがうまく機能します。

ここ: 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>
ページを更新し、[コード スニペットの実行] をクリックして、マウス オーバーします。画像が飛びます。次に、[コード スニペットの実行] をもう一度クリックし、マウス オーバーします。スムーズな移行が行われます。何故ですか？

4

3 に答える 3

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
            }
    }

ワーキングデモ

問題が解決することを願っています。

于 2016-03-29T11:18:23.853 に答える
0

答えはここにあります。

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)
于 2016-03-29T10:51:36.190 に答える