li上的CSS3动画删除

我想添加一个微妙的淡入淡出效果，因为li从ul中删除。我说这片CSS的：li上的CSS3动画删除

-webkit-transition: all 0.2s ease-out; 
transition: all 0.2s ease-out;

我li

然而，当我删除li使用$(this).remove();李被删除，但没有看到动画。

我错过了什么？

编辑我不想使用Jquery fadeOut。我希望能够使用CSS3动画。

来源

2015-04-17 Jack

我想用删除，仍然在CSS3动画有。这可能吗？ – Jack

哦！你只需要一些transitionend事件的魔法。

// start transition animation on click 
 
$(document).on('click', 'li', function() { 
 
    $(this).addClass('removed'); 
 
}); 
 

 
// remove li on transition animation end 
 
$(document).on('transitionend', '.removed', function() { 
 
    $(this).remove(); 
 
});

li { 
 
    cursor: pointer; 
 
    border: 3px solid red; 
 
    margin: 2px; 
 
    padding: 5px; 
 
} 
 

 
.removed { 
 
    transition: all 0.5s ease-out; 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li>menu 1</li> 
 
    <li>menu 2</li> 
 
    <li>menu 3</li> 
 
    <li>menu 4</li> 
 
</ul>

来源

2015-04-17 06:28:09 dizel3d

的超级作品。谢了哥们。 – Jack

谢谢！我为你制作了一个小插件http://jsfiddle.net/dizel3d/v3dwpz6w/。 – dizel3d

你可以尝试这样的事情

$('li').click(function(){ 
 
    $(this).hide(1000,function(){ 
 
     $(this).remove() 
 
}) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<ul> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
    <li>text</li> 
 
</ul>

来源

2015-04-17 06:00:21 Akshay

我想使用CSS3而不是隐藏，因为淡入淡出只是一个例子，CSS3可以做的更多。 – Jack

尝试淡出，然后删除元素：

$(this).fadeOut(200, function() { 
    $(this).remove(); 
});

来源

2015-04-17 06:02:01 Luke

你可以试试这个

<ul> 
    <li>menu 1</li> 
    <li>menu 2</li> 
    <li>menu 3</li> 
    <li>menu 4</li> 
</ul>

与JS

$('li').on('click',function(){ 
    $(this).slideUp('slow'); 
    //You can also use time delay 
    //$(this).slideUp(1000); 
});

拨弄链接fiddle

来源

2015-04-17 06:07:26

见代码片段 - 下面 -

您应该使用fadeOut()的动画效果

$('li').click(function(){ 
 
    $(this).fadeOut(1000,function(){ 
 
     $(this).remove() 
 
}) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<ul> 
 
    <li>click</li> 
 
    <li>click</li> 
 
    <li>click</li> 
 
    <li>click</li> 
 
    <li>click</li> 
 
    <li>click</li> 
 
    <li>click</li> 
 
</ul>

来源

2015-04-17 06:08:22 prog1011

@Jack - 请参阅代码片段，您可以使用fadeOut（）作为 – prog1011

这是一个CSS这样做。

FIDDLE：http://jsfiddle.net/moc1jt05/

HTML：

<ul> 
    <li>hellow world 1!!</li> 
    <li>hellow world 2!!</li> 
</ul>

CSS：

li { 
    transition: all 0.2s ease; 
    opacity: 1; 
} 
li.hide { 
    opacity: 0; 
}

JQUERY：

$("li").on("click", function() { 
    $(this).addClass("hide"); 
});

来源

2015-04-17 06:12:09

li上的CSS3动画删除

回答

相关问题