トランプカードのホバー効果を改善するための助けが必要

Question

カードが他のカードを通過するときにZ-インデックスアニメーションに問題があります。 アニメーションを改善してよりスムーズにするという考えがありますか？ここで アニメーション：https://jsfiddle.net/mk51gs1t/1/ Thxを

CSS：

.card { 
display   : inline-block; 
position  : relative; 
width   : 100px; 
height   : 200px; 
margin-left  : -20px; 
margin-right  : -20px; 

/*background-color : #999999;*/ 
background-image:linear-gradient(90deg, #999999, #666666); 
border   : 3px solid #2e6da4; 

z-index: 1; 

transition: all .2s ease-in-out; 
} 

.center{ 
    transform: scale(1.2, 1.2); 
} 

.previous{ 
    transform: scale(1.1, 1.1); 
} 

.next{ 
    transform: scale(1.1, 1.1); 
} 

JS：

$(function() { 
    zIndexManager($('.center'), $('.previous'), $('.next')); 
    var cardDOMArray = $('.card'); 
    //cardDOMArray.hover(cardEnter, cardLeave); 
    cardDOMArray.hover(function (e) { 
     cardEnter(e.currentTarget, cardDOMArray); 
    }, function (e) { 
     cardLeave(e.currentTarget, cardDOMArray); 
    }); 

    cardDOMArray.on("click", function (e) { 
     drawCard(e.currentTarget); 
    }); 

}); 

function cardEnter(e, cardDOMArray) { 
    // console.log("enter"); 
    // console.log(getPreviousCard($(e))); 
    // console.log(getNextCard($(e))); 

    $('.card').removeClass("center previous next"); 

    getPreviousCard($(e)).addClass("previous"); 
    getNextCard($(e)).addClass("next"); 
    $(e).addClass("center"); 
    zIndexManager($(e), getPreviousCard($(e)), getNextCard($(e))); 
} 

function cardLeave(e, cardDOMArray) { 

    $('.card').removeClass("center previous next").css('zIndex', '1'); 
} 

function getPreviousCard(card) { 
    if (card.prev().length > 0) { 
     return card.prev(); 
    } 
    else { 
     return $(); 
    } 
} 

function getNextCard(card) { 
    if (card.next().length > 0) { 
     return card.next(); 
    } 
    else { 
     return $(); 
    } 
} 

function zIndexManager(centerCard, previousCard, nextCard) { 
    var allNextCard  = centerCard.nextAll(); 
    //console.log(allNextCard); 
    var allNextCardLength = allNextCard.length; 
    //console.log(allNextCardLength); 
    if (allNextCardLength > 0) { 
     centerCard.css('zIndex', allNextCardLength); 
     allNextCard.each(function() { 
      $(this).css('zIndex', --allNextCardLength); 
     }); 
    } 
} 

HTML：

<div class="container"> 
    <h1>carte</h1> 
    <div class="container cardWidget"> 
     <div class="card "> 
     </div> 
     <div class="card "> 
     </div> 
     <div class="card"> 
     </div> 
     <div class="card "> 
     </div> 
     <div class="card previous"> 
     </div> 
     <div class="card center"> 
     </div> 
     <div class="card next"> 
     </div> 
     <div class="card"> 
     </div> 
     <div class="card"> 
     </div> 
     <div class="card"> 
     </div> 
     <div class="card"> 
     </div> 
    </div> 
</div> 

Answer 1

どのようにあなたのz屈折率の変化をアニメーションではないについて：

transition: transform .25s ease-out; 

私には素敵でスムーズに見えます。

JSFiddle

$(function() { 
 
\t zIndexManager($('.center'), $('.previous'), $('.next')) 
 
\t var cardDOMArray = $('.card'); 
 
\t //cardDOMArray.hover(cardEnter, cardLeave); 
 
\t cardDOMArray.hover(function (e) { 
 
\t \t cardEnter(e.currentTarget, cardDOMArray); 
 
\t }, function (e) { 
 
\t \t cardLeave(e.currentTarget, cardDOMArray); 
 
\t }); 
 

 
\t cardDOMArray.on("click", function (e) { 
 
\t \t drawCard(e.currentTarget); 
 
\t }); 
 

 
}); 
 

 
function cardEnter(e, cardDOMArray) { 
 
\t // \t console.log("enter"); 
 
\t // \t console.log(getPreviousCard($(e))); 
 
\t // \t console.log(getNextCard($(e))); 
 

 
\t zIndexManager($(e), getPreviousCard($(e)), getNextCard($(e))); 
 
\t $('.card').removeClass("center previous next"); 
 

 
\t getPreviousCard($(e)).addClass("previous"); 
 
\t getNextCard($(e)).addClass("next"); 
 
\t $(e).addClass("center"); 
 
} 
 

 
function cardLeave(e, cardDOMArray) { 
 

 
\t $('.card').removeClass("center previous next").css('zIndex', '1'); 
 
} 
 

 
function getPreviousCard(card) { 
 
\t if (card.prev().length > 0) { 
 
\t \t return card.prev(); 
 
\t } 
 
\t else { 
 
\t \t return $(); 
 
\t } 
 
} 
 

 
function getNextCard(card) { 
 
\t if (card.next().length > 0) { 
 
\t \t return card.next(); 
 
\t } 
 
\t else { 
 
\t \t return $(); 
 
\t } 
 
} 
 

 
function zIndexManager(centerCard, previousCard, nextCard) { 
 
\t var allNextCard  = centerCard.nextAll(); 
 
\t //console.log(allNextCard); 
 
\t var allNextCardLength = allNextCard.length; 
 
\t //console.log(allNextCardLength); 
 
\t if (allNextCardLength > 0) { 
 
\t \t centerCard.css('zIndex', allNextCardLength); 
 
\t \t allNextCard.each(function() { 
 
\t \t \t $(this).css('zIndex', --allNextCardLength); 
 
\t \t }); 
 
\t } 
 
}

.card { 
 
\t display   : inline-block; 
 
\t position  : relative; 
 
\t width   : 100px; 
 
\t height   : 200px; 
 
\t margin-left  : -20px; 
 
\t margin-right  : -20px; 
 

 
\t /*background-color : #999999;*/ 
 
\t background-image:linear-gradient(90deg, #999999, #666666); 
 
\t border   : 3px solid #2e6da4; 
 

 
\t z-index: 1; 
 

 
\t transition: transform .25s ease-out; 
 
} 
 

 
.center{ 
 
\t transform: scale(1.2, 1.2); 
 
} 
 

 
.previous{ 
 
\t transform: scale(1.1, 1.1); 
 
} 
 

 
.next{ 
 
\t transform: scale(1.1, 1.1); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
\t <h1>carte</h1> 
 
\t <div class="container cardWidget"> 
 
\t \t <div class="card "> 
 
\t \t </div> 
 
\t \t <div class="card "> 
 
\t \t </div> 
 
\t \t <div class="card"> 
 
\t \t </div> 
 
\t \t <div class="card "> 
 
\t \t </div> 
 
\t \t <div class="card previous"> 
 
\t \t </div> 
 
\t \t <div class="card center"> 
 
\t \t </div> 
 
\t \t <div class="card next"> 
 
\t \t </div> 
 
\t \t <div class="card"> 
 
\t \t </div> 
 
\t \t <div class="card"> 
 
\t \t </div> 
 
\t \t <div class="card"> 
 
\t \t </div> 
 
\t \t <div class="card"> 
 
\t \t </div> 
 
\t </div> 
 
</div>