Jquery动画无法与列表项正常工作 [英] Jquery animation doesn't work properly with the list items

问题描述

我有一个垂直的项目列表，每个项目都有一个删除按钮。

这里是下面的代码：

http://codepen.io/ovesyan19/pen/chDgy

jQuery

  $ #tasks_list）。on（'click'，a，function（）{
 var _li = $（this）.parent（li）; 
 _li.addClass ）.stop（）。slideUp（300，function（）{
 _li.remove（）; 
}）; 
 return false; 
}）; 
  

CSS

  #tasks_list li.remove {
 -webkit-animation：collapse_item 300ms ease; 
 animation：collapse_item 300ms ease; 
 -webkit-transform-origin：50％0％; 
 -ms-transform-origin：50％0％; 
 transform-origin：50％0％; 
} 
 
 @keyframes collapse_item {
 0％{-ms-transform：rotateX（0deg）; transform：rotateX（0deg）;} 
 100％{-ms-transform：rotateX（-90deg）; transform：rotateX（-90deg）;} 
} 
 
 @ -webkit-keyframes collapse_item {
 0％{-webkit-transform：rotateX（0deg）;} 
 100％{-webkit-transform：rotateX（-90deg）;} 
} 
  

解决方案

实际上不知道你能否使用 li 这样做，因为元素实际上并不是动画，他们只是被分配，这意味着没有像 margin ， position 或 padding 正在改变，我想你可以实现想要的效果，如果你使用divs，一个插件像形变可能会帮助你。

http://mcpants.github.io/jquery.shapeshift/

编辑： / p>

这是我想到的一个快速解决方案，所以希望它有帮助。

提示：

您可以通过 .remove（）

删除动画结束后的元素b

http://fiddle.jshell.net/prollygeek/8zs3L/1/

I have a vertical list of items each with a delete button. When I click delete on one I want the ones beneath to slide up smoothly, at the moment they are jumping.

Here is the code below:

http://codepen.io/ovesyan19/pen/chDgy

jQuery

$("#tasks_list").on('click', "a", function(){
    var _li = $(this).parent("li");
    _li.addClass("remove").stop().slideUp(300, function(){
        _li.remove();
    });
    return false;
});

CSS

#tasks_list li.remove{
    -webkit-animation: collapse_item 300ms ease;
    animation: collapse_item 300ms ease;
    -webkit-transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    transform-origin: 50% 0%;
}

@keyframes collapse_item {
    0%      {-ms-transform: rotateX(0deg); transform: rotateX(0deg);}
    100%    {-ms-transform: rotateX(-90deg); transform: rotateX(-90deg);}
}

@-webkit-keyframes collapse_item {
    0%      {-webkit-transform: rotateX(0deg);}
    100%    {-webkit-transform: rotateX(-90deg);}
}

解决方案

Actually im not sure if you can do this using li because the elements are not actually animating , they are just being resorted , which means nothing like margin , position or padding is changing , but i think you can achieve the desired effect if you use divs , a plugin like shapeshift may help you as well.

http://mcpants.github.io/jquery.shapeshift/

Edit:

this is a quick solution i thought of , so hope it helps .

Hint:

you can remove the element after animation is over via .remove()

http://fiddle.jshell.net/prollygeek/8zs3L/1/

这篇关于Jquery动画无法与列表项正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！