Components lose style in transition

[Viktor Kukurudziak]

Hi,

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]

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> 

</div> 

 

export default { 

     data: function () { 

         return { 

         }; 

     }, 

     methods: { 

        onCreated: function (args) { 

            this.$refs.about.style.display = "block"; 

        } 

     }, 

     beforeDestroy() { 

       this.$refs.about.style.display = "none"; 

     }, 

} 

 

Modified Sample: https://www.syncfusion.com/downloads/support/forum/145838/ze/vue-sf-test-68941278.zip 

 

Could you please check the above modified sample and get back to us, if you require any further assistance on this? 

 

Regards, 

Ashokkumar B. 

[Viktor Kukurudziak]

Hi,

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]

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. 

 

Regards, 

Ashokkumar B. 

[Viktor Kukurudziak]

Hi,

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]

Hi Viktor Kukurudziak, 

 

Most Welcome. 

 

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

 

Regards, 

Ashokkumar B.  

[Viktor Kukurudziak]

Hi,

Do you have any updates on this issue ?

[Gurunathan A]

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.  

 

https://www.syncfusion.com/feedback/9632/skeleton-of-original-raw-element-rendered-in-vue  

 

Regards,  

Gurunathan