Question

我有一个CSS3动画，其转换根据添加，删除，切换等类中定义的内容生效。

所以，我有一个班级＆＃39; flyOff＆＃39;习惯了;添加时，使元素向上飞到左侧。当它被移除时，它会从那个位置向下飞过/过渡。

$('.exchange-tablet').addClass('transTime flyOff');
$('.exchange_text').fadeOut();

这很好。

然而...

我需要从不同的位置（特别是从右上角）将其恢复原状。

当我removeClass flyOff时，它从左上方向下飞过（过渡），因为它是用flyOff定义的。

问题：我需要它从右上角过渡（向下飞）。

所以，我用右上角定义的坐标创建了类.flyOffr。

$('.exchange-tablet').removeClass('flyOff').addClass('flyOffr');

但是当我执行上述操作时，它仍会从flyOff位置（左上角）向下飞行 - 因为我猜这是在附加所需的flyOffr之前删除的。

尝试使用.toggleClass

$('.exchange-tablet').toggleClass('flyOff flyOffr').addClass('complete');

flyOffr没有被上述内容阅读..

问题不在于CSS边距或坐标 - 因为当我在控制台中添加和删除类时; 例如。根据需要添加flyOffr它只需要一个从两个类转换的解决方案。没有flyOff在flyOffr之前进行阅读。

所以，我认为我需要.switchClass种解决方案。有什么指针吗？

更新：通过@ shash7 有效（虽然不是很理想）（但稍微调整一下）

   $('.exchange-tablet').removeClass('flyOff');
          setTimeout(function() {
          $('.exchange-tablet').addClass('flyOffr');
          $('.exchange-tablet').removeClass('flyOffr');
    }, 600);

Answer 1

试试这个（假设你的动画需要250毫秒）：

$('.exchange-tablet').removeClass('flyOff');
setTimeout(function() {
    $('.exchange-tablet').addClass('flyOffr');
}, 250);

但我强烈建议你不要走这条路。不是为了移动元素而创建类，而是添加转换css和函数，将它添加到元素中，以便以编程方式移动元素。

甚至更好，使用像movejs这样的动画库。

切换类没有先前被读取

1 个答案: