Question

以下Javascript函数用于展开/折叠gridview行

<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>

在我的gridview中，我调用了如下的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";
    }
}

如何在gridview行内展开/折叠中应用过渡效果

1 个答案: