[Solved] Change the open-close animation speed of TelerikDrawer

[Linda]

hi

‫I am using a TelerikDrawer in Push mode with MiniMode="true", but I could not find a way to control how fast it opens and closes.

Here is my code:
<style>

    .k-drawer .k-drawer-wrapper,
    .k-drawer-wrapperr {
        overflow-y: scroll;
        scrollbar-width: none; 
    }


    .k-drawer-mini .k-drawer .k-drawer-wrapper {
        width: 46px;
    }


    .k-drawer-mini .k-drawer.k-drawer-end,
    .k-drawer-expanded .k-drawer.k-drawer-end {
        border-inline-start-width: 0px;
    }


    .k-drawer-push .k-drawer {
        height: calc(100vh - 24px - 24px) !important;
    }

    .k-drawer-content {
        height: calc(100vh - 24px - 24px) !important;
        margin: 0px !important;
        padding: 0px !important;
        max-width: 100% !important;
        background-color: darkolivegreen;
    }





    .k-drawer-container {
        display: flex !important;
    }

    .k-drawer-content {
        flex: 1;
        overflow: hidden;
    }


    .k-drawer-end {
        box-sizing: border-box;
    }




    .k-drawer,
    .k-drawer-wrapper,
    .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition-duration: 5s !important;
    }

    .k-drawer-container,
    .k-drawer-container .k-drawer,
    .k-drawer-container .k-drawer-wrapper,
    .k-drawer-container .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition-duration: 5s !important; 
    }

    .k-drawer,
    .k-drawer .k-drawer-wrapper,
    .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

</style>



<TelerikRootComponent EnableRtl="true">

    <TAppBar  />



    <TelerikDrawer @ref="@Drawer"
                   Position="@DrawerPosition.End"
                   MiniMode="true"
                   Mode="@DrawerMode.Push"
                   TItem="DrawerItem"
                   Width="250"
                   @bind-Expanded="@IsSidebarOpen">

        <Template>
            <NewSidbar @bind-IsOpen="@IsSidebarOpen"></NewSidbar>
        </Template>


        <DrawerContent>
            <div style="flex:1;overflow:hidden !important; height:100%">
                <div style="flex:1; overflow:auto; margin: 0px;height:100%">
                    @Body
                </div>
            </div>
        </DrawerContent>

    </TelerikDrawer>

    <FoterLyout></FoterLyout>

</TelerikRootComponent>




@code {

    private bool IsSidebarOpen = true;

    public TelerikDrawer<DrawerItem> Drawer { get; set; }
    public bool Expanded { get; set; } = true;
    public class DrawerItem;


}

this CSS not work at all

    .k-drawer,
    .k-drawer-wrapper,
    .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition-duration: 5s !important;
    }

    .k-drawer-container,
    .k-drawer-container .k-drawer,
    .k-drawer-container .k-drawer-wrapper,
    .k-drawer-container .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transition-duration: 5s !important; 
    }

    .k-drawer,
    .k-drawer .k-drawer-wrapper,
    .k-drawer-content {
        transition: all 5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
        

[Dimo]

Hi Linda,

The provided CSS code should work, and you can remove most of it. Please inspect the Drawer elements wth the browser's DOM inspector to make sure that your custom CSS rules actually apply to the expected elements. For example, if you are using Blazor CSS isolation, it may not always work. Also, compare your implementation with:

https://blazorrepl.telerik.com/mKaKbUFe54kN5LGG31

Finally, please ask the license holder at your company to assign you a Telerik license. This is required to make your account compliant to our license agreement and grant you access to technical support by us.

Regards,
Dimo
Progress Telerik