遅延：切り替えスタイル（背景画像）角度ng-class

再生ボタンと一時停止ボタンの間の背景画像を変更するために、次の要素があります。遅延：切り替えスタイル（背景画像）角度ng-class

<i ng-class="butcheck ? 'icon icon-share-link3-active' : 'icon icon-share-link3'" class="icon icon-share-link3" style=""></i>

はしかし、プレイ上の最初のクリックは、スタイルの変更をトリガし、それが移行の間にギャップがあるような感じのポーズ背景を表示するには少し時間がかかります。

この特定のケースで背景画像を一時停止する方法はありますか？私はそれが174ms（サイズ：292B）かかることがわかります。

合計で、実際にはユーザーにそのギャップを経験させたくありません。ベストプラクティスを念頭に置いてください。私の回避策は以下の通りですが、正しくは感じられません。

<div id="preload" class="icon-share-link3-active" style="display:none"> 
</div>

スタイルを事前に読み込むのに役立ちます。

出典

2017-07-17 shamaleyte

、この例をチェックしてください画像がプリロードされているとz-index

/* Styles go here */ 
 
#d-1{ 
 
    background-image:url('http://s3.amazonaws.com/rackcdn.kikvid.com/videos/09ba8757a890bb15e26494b5c40fd207/thumbnails/thumb_2_1280x720.jpg'); 
 
    background-size:cover; 
 
    min-height:300px; 
 
    width:100%; 
 
    text-align:center; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
} 
 
#d-2{ 
 
    background-image:url('http://s3.amazonaws.com/rackcdn.kikvid.com/videos/68b50e453cedd89674f3337ef7f3eda3/thumbnails/thumb_0_1280x720.jpg'); 
 
    background-size:cover; 
 
    min-height:300px; 
 
    width:100%; 
 
    text-align:center; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
} 
 
body *{ 
 
    color:#fff; 
 
} 
 
.z-1{ 
 
    z-index:-2; 
 
} 
 
.z-2{ 
 
    z-index:-1; 
 
} 
 
button{ 
 
    color:#000; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.js"></script> 
 
    </head> 
 

 
    <body ng-app="myApp" ng-controller="myCtrl"> 
 
    <div> 
 
     <div id="d-2" ng-class="d2?'z-2':'z-1'"></div> 
 
     <div id="d-1" ng-class="d1?'z-2':'z-1'"></div> 
 
     <h3>my block</h3> 
 
     <p>my paragraph</p> 
 
    </div> 
 
    <button ng-click="toggle()">toggle</button> 
 
    <script> 
 
     var app = angular.module('myApp', []); 
 
     app.controller('myCtrl', function($scope) { 
 
      $scope.d1 = true; 
 
      $scope.d2 = false; 
 
      $scope.toggle = function(){ 
 
      $scope.d1 = !$scope.d1; 
 
      $scope.d2 = !$scope.d2; 
 
      } 
 
     }); 
 
    </script> 
 
    </body> 
 
</html>

のほんの一部の遊び

出典

2017-07-17 13:31:32

遅延：切り替えスタイル（背景画像）角度ng-class

答えて

関連する問題