下面的 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>
最佳答案
对于扩展,您可以像这样添加 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";
}
}
关于javascript - 如何在 gridview 行内展开/折叠时应用过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39298114/