javascript - acara tuding peralihan vue2.0

Question

Cara menggunakan peralihan vue2.0 untuk mencapai kesan menggerakkan tetikus ke atas, meluncur keluar kod QR dari luar skrin dan meninggalkan kod QR dan meluncur keluar dari skrin

Answer 1

Komponen peralihan Vue akan melakukan v-show v-if pada elemen dalam komponen untuk menentukan sama ada untuk memasuki animasi atau meninggalkan animasi, jadi selepas menulis animasi yang sepadan, gerakkan tetikus ke dalam paparan dan biarkan untuk bersembunyi #🎜🎜 #

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
        }

Jika anda ingin meluncur masuk dari luar skrin, tukar saja gaya css, mungkin tulis saja seperti ini