Vue Router enlever/ajouter une class au tag html

Ce sujet est résolu
85692
,

Hello à tous,

J'essaie sans succès d'ajouter une class du nom de 'page-ready' au tag html de mon SPA une fois que la route est chargée.

Actuellement mon code marche mais une seule fois vu que le Load est appellé une fois. Après quand on navigue à travers les vue-route la class n'est plus ajoutée et retirée.

J'utilise la class 'page-ready' pour activer des animations css

 router.beforeEach((to, from, next) => {
    document.documentElement.classList.remove('page-ready')
    next()
 })

 router.afterEach((to, from, next) => {
    window.onload = function() {
        document.documentElement.classList.add('page-ready')
    };
 })

Une idée ?

14 Réponse

44803
,

Salut,

Pour ton cas, as-tu essayé de regarder les <transition> de Vue.js ? Je les maitrise pas encore assez bien pour te dire comment les utiliser mais il me semble que dans la documentation, ils expliquent comment déclencher une animation en arrivant sur une page.

https://vuejs.org/v2/guide/transitions.html
https://router.vuejs.org/en/advanced/transitions.html

116947
, Il a répondu à ma question !

bonjour,

Sur quelle techno es-tu ? Je ne vois pas ce qu'est "SPA". Peux tu nous donner plus de détail ?

Amicalement,

Default
, Il a répondu à ma question !

@yanis-git,
SPA => Single Page Application

85692
, Il a répondu à ma question !

Il s'agit d'un site avec "une seule page". Une fois la première page chargée, les routes sont faites en javascript via Vue Router. Donc le onload est utilisé une fois puis ne marche plus. Et si je enlève le onload :

 router.beforeEach((to, from, next) => {
    document.documentElement.classList.remove('page-ready')
    next()
 })

 router.afterEach((to, from, next) => {
    document.documentElement.classList.add('page-ready')
 })

ça ne marche pas non plus car le page-ready est ajoutée avant que la page soit terminée. L'animation css n'est pas activée.

De toute façon je ne sais pas si c'est la bonne méthode pour arriver à se que je veux.

J'utilise :

  • Laravel
  • Vuejs 2
  • Javascript (pas de jquery).
37685
, Il a répondu à ma question !

Salut,

SPA => Single Page Application

N'importe quoi !
Un SPA c'est un genre de grosse baignoire toute chaude.

ça ne marche pas non plus car le page-ready est ajoutée avant que la page soit terminée.

Ah mais du coup si tu rajoutes ce genre de code pour exécuter seulement quand la page est chargée ça irai ou pas ?

document.addEventListener("DOMContentLoaded", function() {
    router.beforeEach((to, from, next) => {
        document.documentElement.classList.remove('page-ready')
        next()
     })

    router.afterEach((to, from, next) => {
        document.documentElement.classList.add('page-ready')
    })
}
Default
, Il a répondu à ma question !

@SLK, OH ! tu m'as fait peur, j'ai cru avoir dit une connerie mais au final, mort de rire ;)

37685
, Il a répondu à ma question !

Hahaha ^^

Désolé pour la frayeur xD

85692
, Il a répondu à ma question !

@SLK Haha idem, j'ai eu peur.

Autrement pour mon problème, non ça ne marche pas. Il y a une SyntaxError. Et avec le

window.onload = function() {}

Rien ne se passe.

37685
, Il a répondu à ma question !

Syntaxe error ?

Mince j'ai oublié de fermer la parenthèse en bas

document.addEventListener("DOMContentLoaded", function() {
    router.beforeEach((to, from, next) => {
        document.documentElement.classList.remove('page-ready')
        next()
     })

    router.afterEach((to, from, next) => {
        document.documentElement.classList.add('page-ready')
    })
}) // il manquait la parenthèse fermante ici

S'il y a toujours une Syntaxe error, je ne vois pas...

85692
, Il a répondu à ma question !

@SLK Quel boulet je suis... Voilà j'ai ajouté la parenthèse. Enfaite l'animation ne se déclenche toujours pas. La classe est bien là. Je vois aussi dans dans l'inspecteur d'élément de chrome que il y a changement au niveau de la classe (surlignage violet) mais rien.

Par contre si je le fais manuellement directement depuis l'inspecteur, enlèver la class, puis la remettre, ça marche. Une idée ?

85692
, Il a répondu à ma question !

Petit gif pour montrer l'animation : http://imgur.com/ZRlTyYa

85692
, Il a répondu à ma question !

personne ?

116947
, Il a répondu à ma question !

A toute hasard, ta classe est pas appliquée AVANT que le CSS de l'animation soit chargé ?

85692
, Il a répondu à ma question !

@Pandazaur merci c'était ça. En utilisant v-on:after-enter="afterEnter".

<transition name="fade" mode="out-in" v-on:after-enter="afterEnter" v-on:after-leave="afterLeave">
    <router-view :user="user" :constants="constants"/>
</transition>