suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Javascript – Vue-Animationsübergangsakkordeon

Warum können wir kein Akkordeon implementieren?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<code><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,

}</code>

漂亮男人漂亮男人2806 Tage vor1163

Antworte allen(1)Ich werde antworten

  • typecho

    typecho2017-06-26 10:57:42

    不知道你这里的是不是就是完整的代码了，我对你的代码稍作修改之后就能正常运行了。代码的逻辑和CSS样式写得没有问题。如果上面就是你的完整代码，那上面的错误在于，你没有挂载实例。

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

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

    Antwort
    0
  • StornierenAntwort