需要帮助改善扑克牌悬停效果

Question

当一张卡片穿过另一张卡片时，我遇到了一些关于 z-index 动画的问题。您有改进动画并使其更流畅的想法吗？这里是动画：https://jsfiddle.net/mk51gs1t/1/ 谢谢

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-index 变化进行动画处理怎么样：

transition: transform .25s ease-out;

我觉得很漂亮很光滑。

JSFiddle

$(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)));

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

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

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

.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: transform .25s ease-out;
}

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

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

.next{
 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">
 <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>

需要帮助改善扑克牌悬停效果

Need help to improve playing cards hover effect

html

javascript

css

jquery

animation