Question

这是场景：我在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效果似乎不起作用。请建议最好的方法。感谢。

Answer 1

＆＃34;可见＆＃34;无法使用，你应该使用可见性和不透明度来制作动画

让你的按钮是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") });

Answer 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;
}

它返回错误。

Answer 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;

使用更新面板在div之间转换

3 个答案: