javascript - Événement de survol de transition vue2.0

Question

Comment utiliser la transition vue2.0 pour obtenir l'effet de déplacer la souris vers le haut, de faire glisser le code QR de l'extérieur de l'écran, de laisser le code QR et de glisser hors de l'écran

Answer 1

Le composant de transition de Vue effectuera v-show v-if sur les éléments du composant pour déterminer s'il faut entrer dans l'animation ou quitter l'animation, donc après avoir écrit l'animation correspondante, déplacez la souris pour afficher et laisser le # caché 🎜🎜 #

Answer 2

html

<p id="app">
    <p id=ad-box @mouseenter='show =true' @mouseleave='show = false'>
        我是放广告的父盒子
        <transition name='fade'>
            <p id=ad v-show='show'>我是广告</p>
        </transition>
    </p>
</p>

css

html, body, #app {
            width: 100%;
            height: 100%;
        }

        #ad-box {
            width: 200px;
            height: 200px;
            position: fixed;
            right: 0;
            bottom: 50%;
            background: #cccccc;
        }

        #ad {
            width: 100%;
            height: 100%;
            background: gray;
        }

        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s
        }

        .fade-enter, .fade-leave-active {
            opacity: 0
        }

Si vous souhaitez glisser depuis l'extérieur de l'écran, changez simplement le style CSS, écrivez-le probablement comme ceci