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

Question

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

样式:

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