mercredi 27 avril 2016

Fade In / Fade out in liquid-fire

I have a ember template with 2 sections, where one section is visible by default and other one is hidden until I hit a button.

I am using liquid-fire, most specifically the liquid-if helper to do a simple fade in / fade out of the 2 sections. This works however there is a slide up / slide down that occurs between toggling the 2. As anyone seen this behavior before? I would to prevent this slide effect from happening

Here's sample how template looks like:


    <h1 class="text-center"></h1>
    <p class="text-center">
        <br/>
        
        <i class="fa fa-envelope-o email-icon"></i>
    </p>



    <h1 class="text-center"></h1>
    <p class="text-center">
        <br/>
        
    </p>
    


Here's a sample of my transition

this.transition(
    this.hasClass('lf-fade'),
    this.toValue(true),
    this.use('fade', {
        duration: 600
    })
);




Aucun commentaire:

Enregistrer un commentaire