javascript - vue 動畫轉場 手風琴
漂亮男人
漂亮男人 2017-06-26 10:55:42
0
1
1058

為什麼實現不了手風琴?

<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,
}
漂亮男人
漂亮男人

全部回覆(1)
typecho

不知道你這裡的是不是就是完整的程式碼了,我對你的程式碼稍作修改之後就能正常運作了。程式碼的邏輯和CSS樣式寫得沒有問題。如果上面就是你的完整程式碼,那上面的錯誤在於,你沒有掛載實例。

<!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>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!