两个类之间的状态答案

【问题标题】：A state between two classes两个类之间的状态
【发布时间】：2012-08-24 16:27:13
【问题描述】：

我有两个 CSS 类（c1 和 c2），我正在使用 CSS3 过渡在它们之间切换。

现在，我希望 div 保持（不是动画）处于c1 和 c2 之间的状态，例如 60% c1 和 40% c2。（如果我在c1 和c2 之间播放持续时间为 1 秒的过渡，我希望帧的状态出现在 0.4 秒）

c1 和c2 有很多属性（变换等），因此不容易按所需百分比计算每个属性并将其设置为div。

是否有任何用于此目的的 CSS/jQuery 方法？

【问题讨论】：

很多属性不能用百分比来衡量。所以这个问题的通用解决方案是非常不可能的。
浏览器在播放 CSS3 动画时可以计算所有属性。难道不能只拥有那个动画的一帧的状态吗？
为什么不使用第三类？当 div 计划处于这种中间状态时？鼠标悬停还是什么？
没有。您需要编写自己的函数来执行此操作。动画就是这样 - 动画。
@reza 我正在尝试实现刷卡功能，所以我需要的类太多了！

标签： javascript jquery html css

【解决方案1】：

jQueryUI 的switchClass、addClass 函数不支持step 函数参数，这使得实现这一点非常困难。

但是，如果您可以在动画代码本身中指定样式，则可以这样做 - 检查此小提琴：http://jsfiddle.net/techfoobar/fAZqn/2/

【讨论】：

【解决方案2】：

Here is working jsFiddle，这是结构：

jQuery：

//setting animation values
var value1 = 60;
var value2 = 40;

$('a').click(function(){
 var takeClass = $(this).attr('class');
 //takes class from clicked element

 var selectEle = $('.'+ takeClass +'Box');
 //creating selector with takeClass value

 $('span').not(selectEle).animate({'width':value2+'px','height':value2+'px'},90);
 selectEle.animate({'width':value1+'px','height':value1+'px'},90);
});

html：

<a class="c1">1</a>
<a class="c2">2</a>
<span class="c1Box"></span>
<span class="c2Box"></span>

【讨论】：