Animate a component in and out of a page

[Michael Aston]

I'd trying to animate (slide in / slide out) of a component onto a page. The animation that is used on the accordion component would work well for this. Is this animation available without using the accordion component?

[Nevitha Ravi]

Hi Michael, 

Greetings from Syncfusion Support. 

We have validated your reported query, can you please let us know whether do you want to add animation to any other particular Syncfusion component as in our Accordion or want animation effect for your entire page? 

Regards, 

Nevitha 

[Michael Aston]

Its the QueryBuilder component that I'm looking to animate its show and hide. See the attached video. I'd like to eliminate the jerky expansion of the dialog when the QueryBuilder is shown and hidden.

Attachment: 20201217_14h44_22_2976cba5.zip

[Mohan Kumar Ramasamy]

Hi Michael, 

 

We have checked your reported query. We can achieve your requirement using CSS style. Please refer below code snippets. 

 

 

@using Syncfusion.Blazor.QueryBuilder 

@using Syncfusion.Blazor.DropDowns 

 

<SfDropDownList TItem="GameFields" TValue="string" PopupHeight="230px" Placeholder="Select a game" @bind-Value="@DropVal" DataSource="@Games"> 

    <DropDownListFieldSettings Text="Text" Value="Text"></DropDownListFieldSettings> 

    <DropDownListEvents TItem="GameFields" TValue="string" ValueChange="OnChange"></DropDownListEvents> 

</SfDropDownList> 

 

<br /> 

<br /> 

<br /> 

<br /> 

<div id="custom" class="@("custom " + CssClass)"> 

    @if (DropVal == "Querybuilder") 

    { 

        <SfQueryBuilder TValue="EmployeeDetails"> 

            <QueryBuilderColumns> 

                <QueryBuilderColumn Field="EmployeeID" Label="Employee ID" Type="ColumnType.Number"></QueryBuilderColumn> 

                <QueryBuilderColumn Field="FirstName" Label="First Name" Type="ColumnType.String"></QueryBuilderColumn> 

                <QueryBuilderColumn Field="TitleOfCourtesy" Label="Title of Courtesy" Type="ColumnType.Boolean" Values="Values"></QueryBuilderColumn> 

                <QueryBuilderColumn Field="Title" Label="Title" Type="ColumnType.String"></QueryBuilderColumn> 

                <QueryBuilderColumn Field="HireDate" Label="Hire Date" Type="ColumnType.Date"></QueryBuilderColumn> 

                <QueryBuilderColumn Field="Country" Label="Country" Type="ColumnType.String"></QueryBuilderColumn> 

                <QueryBuilderColumn Field="City" Label="City" Type="ColumnType.String"></QueryBuilderColumn> 

            </QueryBuilderColumns> 

        </SfQueryBuilder> 

    } 

</div> 

 

<style> 

    .show { 

        visibility: visible !important; 

        opacity: 1 !important; 

        transition-delay: 0s !important; 

    } 

 

    .custom { 

        visibility: hidden; 

        opacity: 0; 

        transition: visibility 0s linear 0.33s, opacity 0.33s linear; 

    } 

</style> 

@code { 

    private string CssClass = ""; 

    public string DropVal = "None"; 

    public void OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, GameFields> args) 

    { 

        if (args.ItemData.Text == "Querybuilder") 

        { 

            CssClass = "show"; 

        } 

        else 

        { 

            CssClass = ""; 

        } 

    } 

   

    public class GameFields 

    { 

        public string ID { get; set; } 

        public string Text { get; set; } 

    } 

    private List<GameFields> Games = new List<GameFields>() { 

        new GameFields(){ ID= "Game1", Text= "Querybuilder" }, 

        new GameFields(){ ID= "Game2", Text= "None" }, 

     }; 

 

    private string[] Values = new string[] { "Mr.", "Mrs." }; 

    public class EmployeeDetails 

    { 

        public int EmployeeID { get; set; } 

        public string FirstName { get; set; } 

        public bool TitleOfCourtesy { get; set; } 

        public string Title { get; set; } 

        public DateTime HireDate { get; set; } 

        public string Country { get; set; } 

        public string City { get; set; } 

    } 

 

} 

 

 

For your reference, we have prepared a sample based on this. Please refer below link. 

 

Link: https://www.syncfusion.com/downloads/support/forum/160676/ze/QueryBuilderShowHideAnimation279965038  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohan kumar R