1. Home
  2. Forum
  3. Blazor
  4. Sidebar animation on page load

Sidebar animation on page load

Hi,

When a page with a sidebar loads you see the sidebar animation as it slides into place. Is it possible for the sidebar to be in place when the page loads so the animation doesn't occur
?
This is visible on the side/menu demo.
https://blazor.syncfusion.com/demos/sidebar/sidebar-menu

Regards,
Mike

5 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team October 15, 2020 10:43 AM UTC

Hi Michael Aston,  
 
Greetings from Syncfusion support. 
 
We have checked your requirement with Sidebar component. You can disabling the animation by setting Animate as false for Sidebar component. 
 
Refer the below code snippet. 
 
<SfSidebar HtmlAttributes="@HtmlAttribute" Animate="false" Target=".main-content" Width="220px" DockSize="50px" EnableDock="true" @ref="Sidebar"> 
            <ChildContent> 
                <div class="main-menu"> 
                    <p class="main-menu-header">MAIN</p> 
                    <div> 
                        <SfMenu CssClass="dock-menu" Items="@MainMenuItems" Orientation="@VerOrientation"></SfMenu> 
                    </div> 
                </div> 
                <div class="action"> 
                    <p class="main-menu-header">ACTION</p> 
                    <button class="e-btn action-btn" id="action-button">+ Button</button> 
                </div> 
            </ChildContent> 
        </SfSidebar> 
 
Refer the sample link below. 
 
 
Refer the below link to know more about the Sidebar component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


MA Michael Aston October 15, 2020 12:12 PM UTC

Hi,

Sorry I wasn't clear. I want to keep the animation when the sidebar is opened or closed . What I don't want to see is the sidebar opening animation/transition occur when the page is loaded. The transition should not be occurring as the sidebar IsOpen is set to true so I'd expect to see the sidebar opened and in place when the page loads.

Regards,
Mike

SP Sowmiya Padmanaban Syncfusion Team October 19, 2020 07:24 AM UTC

Hi Michael Aston,  
 
You can achieve your requirement in application level by adding the static class to the parent element of the Sidebar and target element. Customize the animation in CSS. You can remove that static class after rendering the component completely to enable the animation. Please refer to the below code. 
 
<div id="wrapper" style="width:100%" class="@css"> 
    <div class="col-lg-12 col-sm-12 col-md-12"> 
        <div class="header-section dock-menu" id="header"> 
            <ul class="header-list"> 
                <li id="hamburger" class="icon-menu icon list" @onclick="@Toggle"></li> 
                <input type="text" placeholder="Search..." class="search-icon list"> 
                <li class="right-header list"> 
                    <div class="horizontal-menu"> 
                        <SfMenu CssClass="dock-menu" Items="@AccountMenuItems" Orientation="@Orientation"></SfMenu> 
                    </div> 
                </li> 
                <li class="right-header list support">Support</li> 
                <li class="right-header list tour">Tour</li> 
            </ul> 
        </div> 
        <!-- sidebar element declaration --> 
        <SfSidebar HtmlAttributes="@HtmlAttribute" @bind-IsOpen="@SidebarOpen"  Target=".main-content" Width="220px" @ref="Sidebar"> 
            <ChildContent> 
                <div class="main-menu"> 
                    <p class="main-menu-header">MAIN</p> 
                    <div> 
                        <SfMenu CssClass="dock-menu" Items="@MainMenuItems" Orientation="@VerOrientation"></SfMenu> 
                    </div> 
                </div> 
                <div class="action"> 
                    <p class="main-menu-header">ACTION</p> 
                    <button class="e-btn action-btn" id="action-button">+ Button</button> 
                </div> 
            </ChildContent> 
        </SfSidebar> 
        <!-- end of sidebar element --> 
        <!-- main content declaration --> 
        <div class="main-content" id="maintext"> 
            <div class="content"> 
                <div> Responsive Sidebar with Menu</div> 
            </div> 
        </div> 
        <!--end of main content declaration --> 
    </div> 
</div> 
  public string css = "custom"; 
  protected override void OnAfterRender(bool firstRender) 
    { 
        if (firstRender) 
        { 
            css = ""; 
        } 
    } 
.custom .e-sidebar { 
        /*CSS transitions*/ 
        -o-transition-property: none !important; 
        -moz-transition-property: none !important; 
        -ms-transition-property: none !important; 
        -webkit-transition-property: none !important; 
        transition-property: none !important; 
        transition: unset !important; 
        /*CSS transforms*/ 
        -o-transform: none !important; 
        -moz-transform: none !important; 
        -ms-transform: none !important; 
        -webkit-transform: none !important; 
        transform: none !important; 
        /*CSS animations*/ 
        -webkit-animation: none !important; 
        -moz-animation: none !important; 
        -o-animation: none !important; 
        -ms-animation: none !important; 
        animation: none !important; 
        width: 220px !important; 
        visibility: visible !important; 
    } 
 
Refer to the modified sample link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Marked as answer
RK Roshan K M March 16, 2022 05:28 PM UTC

Animation effect for sidebar is still not resolved, older versions of syncfusion blazor not showing this animation but higher version does( version 19.3.0.48). Please resolve this issue.


KR Keerthana Rajendran Syncfusion Team March 17, 2022 12:29 PM UTC

Hi Roshan, 
 
We checked the working of Sidebar by setting the Animate property value as true and false. Both options are working fine in 19.3.0.48 as well as in latest version(19.4.0.56).  
 
We have attached the sample in the following link for your reference. 
 
 
If we have misunderstood, kindly elaborate on the exact issue with Animation so that we can check and assist you promptly. 
 
Regards, 
Keerthana R. 
 
 
 
 


Loader.
Up arrow icon