html - 当我用 css3 单击 asp 按钮时，我想显示 div 结果

Question

当我用 css3 慢动作点击 asp 按钮时，我想显示 div 结果，请任何人帮助我。

<div id="showdivslowly" runat="server" style="width:500px; height:200px; background-color:Blue ;display:none" >Welcome</div>

    <asp:Button ID="Button1" runat="server" Text="Button" />

Answer 1

这几乎肯定最好通过 Ajax call 在客户端完成。到服务器以获取结果并将其附加到隐藏的 div，您可以使用 CSS transitions 对其进行动画处理。或者使用 jQuery animation methods like fadeIn .因为 CSS 显示属性是 not animatable using CSS transitions , 你要么需要使用 opacity property (这将是 not be fully supported cross-browser ，尽管对于大多数用途可能已得到充分支持，并且只有动画会受到影响，而不是核心功能)或通过使用 jQuery 方法。

如果您在服务器端处理点击事件，那么浏览器将完成一个完整的页面回传，您可以使用您的服务器端代码附加 div，然后使用 CSS3 转换或 JavaScript 来完成客户端动画.

对于代码示例-

.result {
    -moz-transition: opacity 500ms ease-in-out 0s;
    -o-transition: opacity 500ms ease-in-out 0s;
    -webkit-transition: opacity 500ms ease-in-out 0s;
    transition: opacity 500ms ease-in-out 0s;    }

.result.hidden {
    display: none;
    opacity: 0;    
}

.result.shown {
    display: block;
    opacity: 1;
}