简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Accordéon de transition d'animation vue
漂亮男人
漂亮男人 2017-06-26 10:55:42
0
1
1063

Pourquoi ne pouvons-nous pas mettre en œuvre l’accordéon ? 

<style>
    .collapse-enter{
        max-height: 0;
    }
    .collapse-enter-active {
        max-height: 10rem;
        -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .collapse-leave {
        max-height: 10rem;
    }
    .collapse-leave-active {
        max-height: 0;
        -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
</style>


<h1 @click="detail = !detail">Title</h1>
<transition name="collapse">
    <p v-show="detail">
        在纽约长岛的一家餐吧里有一只132岁的大龙虾。这只纽约最老的龙虾名叫Louie，重22磅（约20斤），20年来，它一直生活在一家餐吧里，餐吧主人Butch Yamali就像养了一只宠物一样，把它养在水族箱里。
    </p>
</transition>


data: {
    detail: false,
}
漂亮男人
漂亮男人

répondre à tous(1)
typecho
typecho2017-06-26 10:57:42 1 plancher

Je ne sais pas si le code que vous avez ici est le code complet. Je peux l'exécuter normalement après avoir légèrement modifié votre code. La logique du code et le style CSS sont écrits sans problème. Si ce qui précède correspond à votre code complet, l'erreur ci-dessus est que vous n'avez pas monté l'instance. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>collapse</title>
    <script src="http://cdn.staticfile.org/vue/2.0.3/vue.js"></script>
    <style>
        .collapse-enter{
            max-height: 0;
        }
        .collapse-enter-active {
            max-height: 10rem;
            -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
            transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .collapse-leave {
            max-height: 10rem;
        }
        .collapse-leave-active {
            max-height: 0;
            -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
            transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
    </style>
</head>
<body>
    <p id="app">
        <h1 @click="detail = !detail">Title</h1>
        <transition name="collapse">
            <p v-show="detail">
                在纽约长岛的一家餐吧里有一只132岁的大龙虾。这只纽约最老的龙虾名叫Louie，重22磅（约20斤），20年来，它一直生活在一家餐吧里，餐吧主人Butch Yamali就像养了一只宠物一样，把它养在水族箱里。
            </p>
        </transition>
    </p>
    <script>
        new Vue({
            el: "#app",
            data: {
                detail: false
            }
        });
    </script>
</body>
</html>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！