Consider this scenario: Numerous div controls are present on an aspx page, and update panels are being used to prevent page refresh. These divs contain various controls like buttons and textboxes:
<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>
Upon button click, data needs to be submitted (server postback) and the visibility of div tags must be toggled to display the next div:
protected void btnCred_Click(object sender, EventArgs e)
{
SubmitData();
divEnvironment.Visible = false;
divConfig.Visible = true;
}
Although the functionality is working as intended, the desired outcome is to have a smooth transition between divs with delayed effects. Initially, a CSS transition was attempted but did not work, likely due to the presence of update panels:
div {
transition: visible 2s;
}
If you have any suggestions on how to achieve a smooth transition between divs while using update panels, please share. Thank you.