如何在更改控件大小的同时添加动画

Question

我想做的是使用具有过渡效果的 CSS 更改面板大小。

C#

我试过： Top_frame.Style.Add("height", "0");（过渡已添加到 css 中的控件）

和：Top_frame.Attributes.Add("style", "transition: 1s; height: 0;");

和：Top_frame.Attributes.Add("class", "HiddenTop_frame");（添加新的 class 和准备好的样式）

.HiddenTop_frame {
    transition: 2s;
    height: 200px;
}

Problem is that all ways just changed the control size without the animation.

关于如何使这种大小变化动画化有什么想法吗？

Answer 1

我认为你的问题如下。我假设该面板已经在您的屏幕上，并且您希望在某些回传发生时为其设置动画。

在回传中，您页面（或更新面板，如果您使用它）的完整内容是 'refreshed'，而对于浏览器来说，您的面板只是一个新的 DIV，具有另一个高度.

你可以做的是用 javascript 控制高度。然后浏览器将高度更改应用于此元素，并触发转换。

例如像这样：

在 html 标记中（或通过 css class）为您的面板设置 0px 的高度，并已对其应用过渡效果：

<asp:Panel id="Top_frame" runat="server" style="height: 0px; transition: height 1s ease 1s;"/>

在您的事件处理程序中发送一些 javascript 到浏览器：

Page.ClientScript.RegisterStartupScript(this.GetType(), "enlarge", $"<script type=text/javascript>document.getElementById('{Top_frame.ClientID}').style.height = '500px';</script>");

此解决方案仅在您未使用 UpdatePanel 时有效。如果是，您应该使用 ScriptManager 来负责在回发时执行脚本。

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ScriptManager.RegisterClientScriptBlock(Top_frame, Top_frame.GetType(), "enlargefunc", "function enlarge() { document.getElementById('" + Top_frame.ClientID + "').style.height = '500px';}", true);
            }
        }

        protected void Button1_Click(object sender, EventArgs e)
        {
           ScriptManager.RegisterStartupScript(Top_frame, Top_frame.GetType(), "enlargeexe", $"setTimeout('enlarge()', 50);", true);
        }

另外，您应该在页面的某处有一个 ScriptManager 元素（可能您有）。请注意，使用了 'setTimeout'，因此在 UpdatePanel 刷新时应用原始高度 (0px) 之前脚本不会执行。

尽管此解决方案有效，但我建议您采用另一种方法：如果只有 in Top_frame 的内容在回发时刷新，将（或一个）UpdatePanel Top_frame 里面。在后面的代码中，您可以更新 Top_frame 的内容。你可以在没有 setTimeout 技巧的情况下调用 'ScriptManager.RegisterStartupScript'。

如何在更改控件大小的同时添加动画

How to add an animation while changing size on control

css

c#

asp.net

webforms

css-animations