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

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 将导致元素立即从 View 中删除。您必须尝试使用​​与宽度转换长度相同的 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";
    }
}