Vue Router enlever/ajouter une class au tag html

bonjour,

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

Amicalement,

@yanis-git,
SPA => Single Page Application

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).

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')
    })
}

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

Hahaha ^^

Désolé pour la frayeur xD

@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.

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...

@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 ?

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

personne ?

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

@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>