JS结合CSS3实现卡牌左右切换动画效果

卡牌切换效果概述

在游戏应用中，常可见到卡牌左右切换的交互设计，其中居中卡片最为醒目，通过左滑或右滑即可切换至下一张。本文将演示如何借助CSS3技术复现这一视觉效果。

示例Demo展示

首先展示一个示例Demo，具体样式细节可根据实际需求自行调整：

（PC端可通过点击按钮进行切换，移动端支持左右滑动操作）

DOM操作与原理分析

观察效果可知，共有5个div元素支持左右切换，每次切换时必有一个元素位于中间显眼位置展示。虽然视觉上看似元素发生了位移及DOM节点的增删，但检查元素结构会发现，DOM节点实际位置并未改变，仅是通过切换每个元素绑定的class，从而实现了页面布局的视觉变化。

核心原理在于避免DOM节点的频繁增删，而是为每个固定位置的div预设特定样式。所有div均采用绝对定位，通过样式的轮播切换实现动画效果。每次切换过程包含0.6s的过渡动画：

-webkit-transition: all 0.6s;
transition: all 0.6s;

类名切换逻辑详解

例如，从左至右的class依次为item_0、item_1、item_cur、item_3、item_4，每个class定义了当前所在div的定位方式。当执行左滑操作时，右侧的div移动至中间位置，此时class从左至右的顺序变更为item_1、item_cur、item_3、item_4、item_0。

var egg_change = function(type){
 var $demo = $('.demo'),
  index = parseInt( $demo.attr('index_cur')||2 ),
  $item = $('.demo .item'),
  len = $item.length;

 if( type=='left' ){
  index = (index+1)%len;
 }else{
  index = (index-1+len)%len;
 }
 $demo.attr('index_cur', index);

 $item.removeClass('item_0 item_1 item_3 item_4 item_cur');
 
 $item.eq( (index-2+len)%len ).addClass('item_0');
 $item.eq( (index-1+len)%len ).addClass('item_1');
 $item.eq(index).addClass('item_cur');
 $item.eq( (index+1)%len ).addClass('item_3');
 $item.eq( (index+2)%len ).addClass('item_4');
}

以上内容为本文的全部讲解，希望能为各位的学习提供有益帮助，同时也欢迎大家继续支持本站。