如何在网格视图行的展开/折叠中应用过渡效果

Question

下面的Javascript函数用于展开/折叠网格视图行

<script type="text/javascript">
    function divexpandcollapse(divname) {
        var div = document.getElementById(divname);
        var img = document.getElementById('img' + divname);
        if (div.style.display == "none") {
            div.style.display = "inline";
            img.src = "Img1/minus.gif";
        } else {
            div.style.display = "none";
            img.src = "Img1/plus.gif";
        }
    }
</script>

在我的网格视图中，我像下面这样调用javascript，它工作得很好，但它会立即扩展。我想慢慢地扩展面板。如何在其中应用css过渡效果。我不知道在哪里应用css。有人能帮我吗。

<asp:TemplateField ItemStyle-Width="20px">
        <ItemTemplate>
            <a href="JavaScript:setTimeout(divexpandcollapse('div<%# Eval("ClaimMasterId") %>'),1000);">
                <img id='imgdiv<%# Eval("ClaimMasterId") %>' width="9px" border="0" src="Img1/plus.gif"
                    alt="" /></a>                        
        </ItemTemplate>
        <ItemStyle Width="20px" VerticalAlign="Middle"></ItemStyle>
    </asp:TemplateField>

Answer 1

对于扩展，可以添加CSS transition属性，如下所示：

#element_id { transition: all 1s ease }

all是指将受转换影响的属性。如果只希望过渡影响宽度，请将该部分替换为width。

但是，您的示例涉及将元素的display属性更新为none，这可能会导致一些愚蠢的事情发生，例如，通过JavaScript设置display: none将导致元素立即从视图中删除。您必须尝试使用与宽度过渡相同长度的setTimeout：

function divexpandcollapse(divname) {
    var div = document.getElementById(divname);
    var img = document.getElementById('img' + divname);
    if (div.style.display == "none") {
        div.style.display = "inline-block"; // allows width to be altered
        div.style.width = "100px"; // or whatever desired width is
        img.src = "Img1/minus.gif";
    } else {
        div.style.width = "0px"; // initializes transition;
        setTimeout(function(){
            div.style.display = "none"; // will happen after transition..
        }, 1000); // ..bc we set the transition time to 1s in css
        img.src = "Img1/plus.gif";
    }
}