search

Home  >  Q&A  >  body text

javascript - vue animation transition accordion

Why can't we implement accordion? 

<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 days ago1078

reply all(1)I'll reply

  • typecho

    typecho2017-06-26 10:57:42

    I don’t know if the code you have here is the complete code. I can run it normally after I slightly modified your code. There is no problem with the code logic and CSS style. If the above is your complete code, the error above is that you did not mount the 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>

    reply
    0
  • Cancelreply