VueJs : Animation éléments , enter-active et leave-active

Alex Salicki
Javascript

Bonjour à tous ;)

Je suis débutant en Code et Javascript et je suis entrain de créer mon porfolio avec VueJS en SPA et j'aimerais créer des animations sur mes élements lorsque j'entre sur ma page et lorsque que je la quitte.

Mon Problème

J'ai réussi à faire une transition " fadein " entre mes pages ( sur la classe "routerview") en utlisant la fonction d'entrée et de sortie de VueJS et tout fonctionne bien. Mais lorsque j'essaye d'animer un élement en particulier de la même facon lorsque je rentre sur ma page et que je la quitte , rien ne se ne passe.

Voici mon code

App.vue

<template>
  <div id="app">
        <div class="Grid">
            <div class="Grid-cell u-size12 u-offset2">
                <div class="Stripes-container">
                    <div class="Stripes-item"></div>
                </div>
            </div>

        </div>
        <div class = "horizontal">
            <div class="stripes-horizontal_1"></div>
            <div class="stripes-horizontal_2"></div>
            <div class="stripes-horizontal_3"></div>
            <div class="stripes-horizontal_4"></div>
            <div class="stripes-horizontal_5"></div>
            <div class="stripes-horizontal_6"></div>

            <nav class="nav-top">
            <!-- the router outlet, where all matched components would ber viewed -->
            <router-link v-bind:to="'/'" style="padding:10px ; font-size:12px">+Projects</router-link>
            <router-link v-bind:to="'/about'"style="padding:10px ; font-size:12px">About</router-link>
            </nav>
            <nav class="network">
            <!-- the router outlet, where all matched components would ber viewed -->
            <router-link v-bind:to="'/'" style="padding:10px ; font-size:12px">Dribbble</router-link>
            <router-link v-bind:to="'/about'"style="padding:10px ; font-size:12px">Linkedin</router-link>
            </nav>
            <nav class="logo">
            <!-- the router outlet, where all matched components would ber viewed -->
            <router-link v-bind:to="'/'" style="padding:10px ; font-size:17px">Alex S.</router-link>
            </nav>
    </div>

  <transition name="router-anim">
    <router-view></router-view>
  </transition>
  </div>
</template>

<script>
export default {
  name: 'app'
}
</script>

<!-- styling for the component -->
<style>

@import "https://cdn.jsdelivr.net/npm/animate.css@3.5.1";

.router-anim-enter-active {
    animation: coming 1s;
  animation-delay: .5s;
    opacity: 0;
}

.router-anim-leave-active {
    animation: going 1s;

}

@keyframes going {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50px);
        opacity:0;
    }
}

@keyframes coming {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

</style>Entourez votre code pour bien le mettre en forme

About.vue

<template>
  <div id="about">
        <section class="section-2">
    <transition :duration="1000" name="fade">
        <div class="section__about">
            <h2 class="section__title_about">Hey,</h2>
            <p class="section__description">Enim funeribus nemo ad has Scironis Scironis nemo quae quae ad pilatorum ut praerupta sed navem contigui quae navigabant deinde sunt contigui letalia letalia navem sed navigabant has appulit has.
                <span class="section__description-inner"></span></p>
        </div>
        </transition>

        <div class ="section__contact">
            <h1 class="section__title_contact">Personal Contact :</h1>
            <p class="section__description_contact">salicki.alex@gmail.com<br>+33632913360
                <span class="section__description-inner"></span></p>
        </div>

        <div class="section__info">
            <p class="section__description_info">Coded and Designed by Alex Salicki
                <span class="section__description-inner"></span></p>
        </div>
        <div class="section__about_me">
            <p class="section__description_about_me">About me
                <span class="section__description-inner"></span></p>
        </div>
        <div class="letter-a">A</div>
        <div class="letter-b">B</div>
        <div class="letter-o">O</div>
    </section>
  </div>
</template>

<script>
export default {
  name: 'about',

};
</script>
<!-- styling for the component -->
<style>

@import "https://cdn.jsdelivr.net/npm/animate.css@3.5.1";

    .fade-enter-active {
        animation: coming 1s;
      animation-delay: .5s;
        opacity: 0;
    }

    .fade-leave-active {
        animation: going 1s;

    }

    @keyframes going {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50px);
            opacity:0;
        }
    }

    @keyframes coming {
        from {
            transform: translateX(-50px);
            opacity: 0;
        }
        to {
            transform: translateX(0px);
            opacity: 1;
        }
    }

</style>

Le code complet de mon App est diponible sur Github : https://github.com/Alexsalicki91/Animation-elements/tree/master/portfolio

Ce que j'ai essayé

J'aimerais animer par exemple un élement lorsque j'entre sur la page About.vue et lorsque je la quitte . J'ai essayé de mettre le code :

 <transition :duration="1000" name="fade">
        <div class="section__about">
            <h2 class="section__title_about">Hey,</h2>
            <p class="section__description">Enim funeribus nemo ad has Scironis Scironis nemo quae quae ad pilatorum ut praerupta sed navem contigui quae navigabant deinde sunt contigui letalia letalia navem sed navigabant has appulit has.
                <span class="section__description-inner"></span></p>
        </div>
        </transition>

Et en css pour animer l'élement 

.fade-enter-active {
        animation: coming 1s;
      animation-delay: .5s;
        opacity: 0;
    }

.fade-leave-active {
        animation: going 1s;

    }
    @keyframes going {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50px);
            opacity:0;
        }
    }
    @keyframes coming {
        from {
            transform: translateX(-50px);
            opacity: 0;
        }
        to {
            transform: translateX(0px);
            opacity: 1;
        }
    }

</style>

Mais rien ne se passe et je comprends pas pourquoi. Étant débutant ai je oublié une étape importante dans mon code pour animer un élement lorsque j'entre sur ma page et que je la quitte ? Que me conseillez vous de faire ?

Bonne soirée à tous ! :)
Alex Salicki

2 réponses

Alex Salicki
Auteur

Salut ,
Merci beaucoup de ta réponse et de ton aide ! :) J'ai fait des recherches sur ta solution mais ce n'est encore claire ! SI tu peux soumettre une pull request sur mon repo ,cela m'aiderait beaucoup !

Bonne soirée à toi ;)

Alex Salicki

Alex Salicki
Auteur

Merci beaucoup pour ton pull request et ta solution et désolé du temps de réponse ! Tout marche parfaitement bien !
J'aurais une dernière question :
Pour effectuer un fade out sur un élement lorsque je quitte la page pour revenir à ma HomePage j'ai rajouté ce code à la suite de ta solution que j'ai trouvé sur un forum : 

<script>
export default {
  name: 'about',
    mounted() {
        this.$refs.about.classList.remove('pause-animation')
        $(function(){
    $(window).on('beforeunload', function(){
        $("body").fadeOut(1000);
    });
    });
    }

}
</script>

Mais rien s'éffectue ! Comment dois je procéder pour effectuer un fade out sur mon élement lorsque que je quitte ma page pour revenir à ma HomePage ? Que me conseilles tu de faire ?

Bonne soirée à toi !