带有更新面板的 div 之间的转换答案

【问题标题】：Transition between divs with update panel带有更新面板的 div 之间的转换
【发布时间】：2017-10-09 09:26:29
【问题描述】：

以下是场景：我在一个 aspx 页面上有多个 div 控件。我正在使用更新面板来避免页面刷新。 div 包含按钮、文本框等控件：

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">   
      <ContentTemplate>             
        <div id="divEnvironment" runat="server" visible="true">  
           <asp:Button ID="btnCred" runat="server" OnClick="btnCred_Click" Text="Proceed" Width="100px" />
       </div>
    </ContentTemplate> 
       <Triggers>          
           <asp:AsyncPostBackTrigger ControlID="btnCred" EventName="Click" />               
       </Triggers> 
 </asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel2" runat="server">   
    <ContentTemplate>               
       <div id="divConfig" runat="server" visible="false"> 
           <asp:TextBox ID="txtDoamin" runat="server" Width="430px"></asp:TextBox>
       </div>
   </ContentTemplate>  
</asp:UpdatePanel>

单击按钮时，我必须提交数据（服务器回发）以及切换 div 标签的可见性以显示下一个 div：

protected void btnCred_Click(object sender, EventArgs e)
{      
    SubmitData();   

    divEnvironment.Visible = false;              
    divConfig.Visible = true;           
}

它工作正常，但我想要实现的是 div 之间的过渡应该是平滑的（具有延迟的过渡效果）。我试过这个：

 div {
        transition: visible 2s;
    }

但它没有用。实际上问题是更新面板。没有它们它可以工作，但使用更新面板，css 效果似乎不起作用。请建议最好的方法。谢谢。

【问题讨论】：

可见性怎么样：可见；不透明度：1；过渡：不透明度 2s 线性；
其实问题出在更新面板上。没有它们它可以工作，但使用更新面板，css 效果似乎不起作用。

标签： javascript jquery css asp.net ajax

【解决方案1】：

“可见”不能用，你应该用可见性和不透明度来制作动画

让你的按钮是 html

使用post方式提交

像这样制作 css：

.active {
   visibility: visible;
   opacity:1;
}

#divEnvironment {
   visibility: hidden;
   opacity:0;
   transition: all 0.5s;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
}

#divConfig {
   visibility: hidden;
   opacity:0;
   transition: all 0.5s;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
}

and then if you add "active" class to each one with jquery you can see fade effect
but if you want to use slide animations you can use for example :
transform: translateY(-20%);

add active class with jquery for example:
$(btn).click(function(){ $("#divConfig").removeClass("active"); $("#divEnvironment").addClass("active") });

【讨论】：

非常感谢您的回答。 div 过渡效果很好。但是我的 POST 方法无法调用代码隐藏函数。
另外，我们如何在代码隐藏的WebMethod中调用页面的控件，如文本框、标签等？

【解决方案2】：

@Houtan - 这是我正在使用的 POST 方法：

 function btnCred_Click() {
    $.ajax({
        type: "POST",
        url: "Transition.aspx/btnCred_Click",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert(msg.d);
        },
        error: function (msg) {
            alert('Error');
        }
    });
    return false;
}

它返回错误。

【讨论】：

【解决方案3】：

你应该这样发帖：

var Result = 0;
$.ajax(
{ url: "pathToPage/Transition.aspx/methodName",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    type: "POST",
    async: false,
    data: "{'id':'" + $("#txtId").val() + "','name':'" + $("#txtName").val() + "'}",
    success: function (data) {
        Result = data.d;
    },
    error: function () { Result = "error posting data to server"; }
});
return Result;

【讨论】：