使用CSS3转换：应用初始类似乎不工作

我想创建一个幻灯片，它将使用CSS3转换时可用和类间动画。但是，我无法设置从哪个初始值进行动画处理。使用CSS3转换：应用初始类似乎不工作

我所试图做的是

起飞转变如此举动立即
设置需要我的元素的定位
反过来转换回类
改变类，所以该动画发生

我试图使用的代码是

item //set initial position 
    .css(vP + "transition", "") 
    .removeClass('left').removeClass("right").removeClass("center") 
    .addClass(toClass) 
    //move 
    .css(vP + "transition", css3Transition) 
    .removeClass(toClass) 
    .addClass('center');

然而，最初的类似乎并没有被应用。

例子在行动在这里http://jsfiddle.net/EcvBP/31/

我将如何去应用这个类（以便将项目转变之前的重新定位）？

来源

2011-10-11 Tom

仅供参考，你可以做'item.removeClass（“左，右中心”）;'，而不是链接的方法3次 – Jason

我不能锻炼你的代码，但我知道如何更一般地解决问题。首先，您需要删除转换css，并应用新的定位规则。然后你需要使用setTimout（...，10）重新添加转换并设置新的位置。 – Gerben

以下Gerben的指针我能够得到它的工作，工作代码包含在下面的链接，解决方案是稍稍延迟过渡。

item 
    //set inital move from position 
    .css(vP + "transition", "") 
    .removeClass("left right center") 
    .addClass(toClass) 
    .delay(10, "doMove").queue("doMove", function(){ 
     //move 
     $(this).css(vP + "transition", css3Transition) 
     .removeClass(toClass) 
     .addClass("center"); 
    }).dequeue("doMove");

http://jsfiddle.net/EcvBP/37/

来源

2011-10-12 10:02:54 Tom

-1

我不认为jQuery 可以添加你写的格式的CSS属性。你可以只写一个CSS类像

.transition { 
-moz-transition: all 0.2s linear; 
-webkit-.... 
transition... 
}

然后用addClass（“过渡”）和removeClass（“过渡”）来添加和删除过渡。

另外，尝试只是“过渡”，而不是像你用过的浏览器前缀，但再次，不确定它实际上工作。

编辑：刚才看到你需要补间速度。您可能需要使用插件，如plugins.jquery.com/plugin-tags/css3-transitions

来源

2011-10-11 17:54:26 Jerry

CSS属性definetely可以这种方式添加，也需要浏览器前缀，问题是需要延迟，以便浏览器识别该类已被添加 – Tom

哦，很酷。不知道他们使用前缀。 – Jerry

使用CSS3转换：应用初始类似乎不工作

回答

相关问题