cari

Rumah  >  Soal Jawab  >  teks badan

javascript - akordion peralihan animasi vue

Mengapa kita tidak boleh melaksanakan akordion? 

<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,
}
漂亮男人漂亮男人2712 hari yang lalu1082

membalas semua(1)saya akan balas

  • typecho

    typecho2017-06-26 10:57:42

    Saya tidak tahu sama ada kod yang anda ada di sini adalah kod lengkap saya boleh menjalankannya seperti biasa selepas saya mengubah suai kod anda. Tiada masalah dengan logik kod dan gaya CSS. Jika di atas ialah kod lengkap anda, ralat di atas ialah anda tidak melekapkan contoh itu. 

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

    balas
    0
  • Batalbalas