recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Accordéon de transition d'animation vue

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,
}
漂亮男人漂亮男人2708 Il y a quelques jours1077

répondre à tous(1)je répondrai

  • typecho

    typecho2017-06-26 10:57:42

    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>

    répondre
    0
  • Annulerrépondre