问隐藏/显示时列表元素动画不起作用
EN

Stack Overflow用户

提问于 2015-09-15 11:19:42

回答 4查看 119关注 0票数 0

从这里可以看到li元素的动画吗：

http://jsfiddle.net/8XM3q/light/

当使用显示/隐藏功能而不是移除时进行动画？当我将"remove“更改为"hide”时，元素没有移动：http://jsfiddle.net/8XM3q/90/

我想在我的内容过滤动画中使用这个功能--这就是为什么我必须将“移除”替换为“隐藏/显示”。

我不擅长JS，但我认为它会计算所有元素，即使它们是隐藏的：

function createListStyles(rulePattern, rows, cols) {
var rules = [], index = 0;
for (var rowIndex = 0; rowIndex < rows; rowIndex++) {
    for (var colIndex = 0; colIndex < cols; colIndex++) {
        var x = (colIndex * 100) + "%",
            y = (rowIndex * 100) + "%",
            transforms = "{ -webkit-transform: translate3d(" + x + ", " + y + ", 0); transform: translate3d(" + x + ", " + y + ", 0); }";
        rules.push(rulePattern.replace("{0}", ++index) + transforms);
    }
}
var headElem = document.getElementsByTagName("head")[0],
    styleElem = $("<style>").attr("type", "text/css").appendTo(headElem)[0];
if (styleElem.styleSheet) {
    styleElem.styleSheet.cssText = rules.join("\n");
} else {
    styleElem.textContent = rules.join("\n");
}

所以我的问题是，如何调整这部分代码，使其只计算"show“(显示的)元素？

javascript

animation

html-lists

show-hide

removeclass

回答 4

Stack Overflow用户

发布于 2015-09-15 11:24:50

我编辑了你的jsFiddle：http://jsfiddle.net/8XM3q/101/

注意我修改了这一行：http://jsfiddle.net/8XM3q/101/ $( this ).closest("li").remove()；

关于这个：$(this).closest("li").hide("slow",function(){$(this).detach()});

这意味着隐藏项目，速度=慢，当隐藏完成后删除它。

希望这就是你的意思。

编辑:包含的拆离。

票数 1

Stack Overflow用户

发布于 2015-09-15 11:38:20

如果您想在保留动画的同时保留所有数据，则使用detach()函数而不是remove：jQuery - detach

要计算或选择元素，请尝试使用附加到每个元素的css类来执行此操作。

票数 1

Stack Overflow用户

发布于 2015-09-15 11:47:32

As per your comment

我想在我的内容过滤动画中使用这个函数--这就是为什么我必须将“删除”替换为“隐藏/显示”，我根本不想删除元素。如果我的问题误导了你，我很抱歉。

您可以做的是使用缓存来存储列表项，因为它们在您进行内容过滤时是隐藏的。稍后，当您需要重置整个列表时，您可以从缓存中补充这些项。

相关代码片段...

HTML

...
<button class="append">Add new item</button>
<button class="replenish">Replenish from cache</button>
<div id="cache"></div>

JS：

...
$(this).closest("li").hide(600, function() { 
    $(this).appendTo($('#cache')); 
});
...
$(".replenish").click(function () {
    $("#cache").children().eq(0).appendTo($(".items")).show();
});

演示小提琴：

代码片段

$(function() {
    $(document.body).on("click", ".delete", function (evt) {
        evt.preventDefault();
        $(this).closest("li").hide(600, function() { 
            $(this).appendTo($('#cache')); 
		});
    });
    
    $(".append").click(function () {
        $("<li>New item  <a href='#' class='delete'>delete</a></li>").insertAfter($(".items").children()[2]);
    });
    $(".replenish").click(function () {
        $("#cache").children().eq(0).appendTo($(".items")).show();
    });

    // Workaround for Webkit bug: force scroll height to be recomputed after the transition ends, not only when it starts
    $(".items").on("webkitTransitionEnd", function () {
        $(this).hide().offset();
        $(this).show();
    });
});

function createListStyles(rulePattern, rows, cols) {
    var rules = [], index = 0;
    for (var rowIndex = 0; rowIndex < rows; rowIndex++) {
        for (var colIndex = 0; colIndex < cols; colIndex++) {
            var x = (colIndex * 100) + "%",
                y = (rowIndex * 100) + "%",
                transforms = "{ -webkit-transform: translate3d(" + x + ", " + y + ", 0); transform: translate3d(" + x + ", " + y + ", 0); }";
            rules.push(rulePattern.replace("{0}", ++index) + transforms);
        }
    }
    var headElem = document.getElementsByTagName("head")[0],
        styleElem = $("<style>").attr("type", "text/css").appendTo(headElem)[0];
    if (styleElem.styleSheet) {
        styleElem.styleSheet.cssText = rules.join("\n");
    } else {
        styleElem.textContent = rules.join("\n");
    }
}

createListStyles(".items li:nth-child({0})", 50, 3);

body { font-family: Arial; }
.items { 
    list-style-type: none; padding: 0; position: relative;
    border: 1px solid black; height: 220px; overflow-y: auto; overflow-x: hidden;
    width: 600px;
}
.items li { 
    height: 50px; width: 200px; line-height: 50px; padding-left: 20px;
    border: 1px solid silver; background: #eee; box-sizing: border-box; -moz-box-sizing: border-box;
    position: absolute; top: 0; left: 0; 
    -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out;
}
div.cache { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="items">
    <li>Monday <a href="#" class="delete">delete</a>
    </li><li>Tuesday <a href="#" class="delete">delete</a>
    </li><li>Wednesday <a href="#" class="delete">delete</a>
    </li><li>Thursday <a href="#" class="delete">delete</a>
    </li><li>Friday <a href="#" class="delete">delete</a>
    </li><li>Saturday <a href="#" class="delete">delete</a>
    </li><li>Sunday <a href="#" class="delete">delete</a></li>
</ul>
<button class="append">Add new item</button>
<button class="replenish">Replenish from cache</button>
<div id="cache"></div>