We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Components lose style in transition

Thread ID:





145838 Jul 10,2019 09:24 AM UTC Oct 21,2019 01:01 PM UTC Vue 7
Tags: DatePicker
Viktor Kukurudziak
Asked On July 10, 2019 09:24 AM UTC

We use <transition> element with animate.css transitions in our applications.
While transition is happening syncfusion components lose style and shows as empty inputs.
You can find mode details in attached files (screen and source code).

Attachment: vuesftest_c98b36c2.zip

Ashokkumar Balasubramanian [Syncfusion]
Replied On July 11, 2019 10:42 AM UTC

Hi Viktor Kukurudziak, 
Greetings from Syncfusion support. 
The reported problem due to apply the transition on router content. If apply the transition on router content, take some time (based in specified duration attribute value) for rendering the component and apply styles. For this case, we suggest to specifying the duration attribute value as minimum on transition element or else show the input elements on after creating the component (using display style attribute). Please check the below code block.  
<div ref="about" v-if="hasContent" class="card-body"> 
    <ejs-datepicker v-model="date" placeholder="TEST" :created="onCreated"></ejs-datepicker> 
export default { 
     data: function () { 
         return { 
     methods: { 
        onCreated: function (args) { 
            this.$refs.about.style.display = "block"; 
     beforeDestroy() { 
       this.$refs.about.style.display = "none"; 
Could you please check the above modified sample and get back to us, if you require any further assistance on this? 
Ashokkumar B. 

Viktor Kukurudziak
Replied On July 11, 2019 01:45 PM UTC

thanks for quick response.
Basically you example works but this was sample application and i real work application we have a lot of pages with different components.
Adding this code will create a lot of mess in our code.
Also, for my experience all other component(default or 3th party) work fine with transition and don't have problem like this.
So, you send me a work around but I'm locking for a fix.
Are you our team planning to make one ?

Ashokkumar Balasubramanian [Syncfusion]
Replied On July 16, 2019 04:04 PM UTC

Hi Viktor Kukurudziak, 
We will check the possible ways to include the fix for the reported issue with our current architecture at our end. So, we suggest you use the provided work around solution in the previous update to get rid of the reported issue. 
Ashokkumar B. 

Viktor Kukurudziak
Replied On July 17, 2019 06:24 AM UTC

great to hear that.
Let me know when it's done.
Meanwhile i will use the fix you give me.
Thanks for your help.

Ashokkumar Balasubramanian [Syncfusion]
Replied On July 17, 2019 07:29 AM UTC

Hi Viktor Kukurudziak, 
Most Welcome. 
Please let us know, if you need any further assistance. 
Ashokkumar B.  

Viktor Kukurudziak
Replied On October 16, 2019 12:54 PM UTC

Do you have any updates on this issue ?

Gurunathan A [Syncfusion]
Replied On October 21, 2019 01:01 PM UTC

Hi Viktor,  
Thanks for report us.  
We have considered this as a bug and will be resolved in our volume 4, 2019 release which is scheduled on mid of December, 2019.  
Please track the status of issue by using below link.  


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon