过渡与动画

1
<style>
2
  // 动画进入，离开的样式
3
    .fade-enter-active,
4
    .fade-leave-active {
5
        transition: opacity 0.5s;
6
    }
7
    // 动画进入的起点，动画离开的终点
8
    .fade-enter,
9
    .fade-leave-to {
10
        opacity: 0;
11
    }
12
</style>
13

14
<div id="demo">
15
    <button v-on:click="show = !show">Toggle</button>
16
    <transition name="fade">
17
        <p v-if="show">hello</p>
18
    </transition>
19
</div>
20

21
<script>
22
    new Vue({
23
        el: '#demo',
24
        data: {
25
            show: true,
26
        },
27
    })
28
</script>

1
<link
2
    href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1"
3
    rel="stylesheet"
4
    type="text/css"
5
/>
6

7
<div id="example">
8
    <button @click="show = !show">Toggle render</button>
9
    <transition
10
        name="custom-classes-transition"
11
        enter-active-class="animated tada"
12
        leave-active-class="animated bounceOutRight"
13
    >
14
        <p v-if="show">hello</p>
15
    </transition>
16
</div>
17

18
<script>
19
    new Vue({
20
        el: '#example',
21
        data: {
22
            show: true,
23
        },
24
    })
25
</script>

1
<!DOCTYPE html>
2
<html lang="en">
3
    <head>
4
        <meta charset="UTF-8" />
5
        <title>过渡与动画</title>
6
        <style>
7
            .fade1-enter,
8
            .fade1-leave-to {
9
                opacity: 0;
10
            }
11
            .fade1-enter-active,
12
            .fade1-leave-active {
13
                transition: opacity 1s;
14
            }
15
            .fade2-enter {
16
                opacity: 0;
17
                transform: translateX(-20px);
18
            }
19
            .fade2-leave-to {
20
                opacity: 0;
21
                transform: translateX(20px);
22
            }
23
            .fade2-enter-active,
24
            .fade2-leave-active {
25
                transition: all 3s;
26
            }
27
        </style>
28
    </head>
29
    <body>
30
        <!--
31
        1. vue动画的理解
32
            操作css的transition或animation
33
            vue会给目标元素添加/移除特定的class
34
        2. 基本过渡动画的编码
35
            1). 在目标元素外包裹<transition name="xxx">
36
            2). 定义class样式
37
                1>. 指定过渡样式: transition
38
                2>. 指定隐藏时的样式: opacity/其它
39
        3. 过渡的类名
40
            xxx-enter-active: 指定显示的transition
41
            xxx-leave-active: 指定隐藏的transition
42
            xxx-enter: 指定隐藏时的样式
43
    -->
44
        <div id="app1">
45
            <button @click="isShow = !isShow">Destroy</button>
46
            <transition name="fade1">
47
                <p v-if="isShow">Hello</p>
48
            </transition>
49
        </div>
50
        <div id="app2">
51
            <button @click="isShow = !isShow">Destroy</button>
52
            <transition name="fade2">
53
                <p v-if="isShow">Hello</p>
54
            </transition>
55
        </div>
56
        <script type="text/javascript" src="./vue.js"></script>
57
        <script type="text/javascript">
58
            new Vue({
59
                el: '#app1',
60
                data() {
61
                    return {
62
                        isShow: 'false',
63
                    }
64
                },
65
            })
66
            new Vue({
67
                el: '#app2',
68
                data() {
69
                    return {
70
                        isShow: 'false',
71
                    }
72
                },
73
            })
74
        </script>
75
    </body>
76
</html>

1
<style>
2
    .list-item {
3
        display: inline-block;
4
        margin-right: 10px;
5
    }
6
    .list-enter-active,
7
    .list-leave-active {
8
        transition: all 1s;
9
    }
10
    .list-enter, .list-leave-to
11
    /* .list-leave-active for below version 2.1.8 */ {
12
        opacity: 0;
13
        transform: translateY(30px);
14
    }
15
</style>
16

17
<div id="list-demo" class="demo">
18
    <button v-on:click="add">Add</button>
19
    <button v-on:click="remove">Remove</button>
20
    <transition-group name="list" tag="p">
21
        <span v-for="item in items" v-bind:key="item" class="list-item">
22
            {{ item }}
23
        </span>
24
    </transition-group>
25
</div>
26

27
<script>
28
    new Vue({
29
        el: '#list-demo',
30
        data: {
31
            items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
32
            nextNum: 10,
33
        },
34
        methods: {
35
            randomIndex: function () {
36
                return Math.floor(Math.random() * this.items.length)
37
            },
38
            add: function () {
39
                this.items.splice(this.randomIndex(), 0, this.nextNum++)
40
            },
41
            remove: function () {
42
                this.items.splice(this.randomIndex(), 1)
43
            },
44
        },
45
    })
46
</script>

1
<style>
2
    .flip-list-move {
3
        transition: transform 1s;
4
    }
5
</style>
6

7
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
8

9
<div id="flip-list-demo" class="demo">
10
    <button v-on:click="shuffle">Shuffle</button>
11
    <transition-group name="flip-list" tag="ul">
12
        <li v-for="item in items" v-bind:key="item">{{ item }}</li>
13
    </transition-group>
14
</div>
15

16
<script>
17
    new Vue({
18
        el: '#flip-list-demo',
19
        data: {
20
            items: [1, 2, 3, 4, 5, 6, 7, 8, 9],
21
        },
22
        methods: {
23
            shuffle: function () {
24
                this.items = _.shuffle(this.items)
25
            },
26
        },
27
    })
28
</script>

1
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
2

3
<div id="staggered-list-demo">
4
    <input v-model="query" />
5
    <transition-group
6
        name="staggered-fade"
7
        tag="ul"
8
        v-bind:css="false"
9
        v-on:before-enter="beforeEnter"
10
        v-on:enter="enter"
11
        v-on:leave="leave"
12
    >
13
        <li
14
            v-for="(item, index) in computedList"
15
            v-bind:key="item.msg"
16
            v-bind:data-index="index"
17
        >
18
            {{ item.msg }}
19
        </li>
20
    </transition-group>
21
</div>
22

23
<script>
24
    new Vue({
25
        el: '#staggered-list-demo',
26
        data: {
27
            query: '',
28
            list: [
29
                { msg: 'Bruce Lee' },
30
                { msg: 'Jackie Chan' },
31
                { msg: 'Chuck Norris' },
32
                { msg: 'Jet Li' },
33
                { msg: 'Kung Fury' },
34
            ],
35
        },
36
        computed: {
37
            computedList: function () {
38
                var vm = this
39
                return this.list.filter(function (item) {
40
                    return (
41
                        item.msg
42
                            .toLowerCase()
43
                            .indexOf(vm.query.toLowerCase()) !== -1
44
                    )
45
                })
46
            },
47
        },
48
        methods: {
49
            beforeEnter: function (el) {
50
                el.style.opacity = 0
51
                el.style.height = 0
52
            },
53
            enter: function (el, done) {
54
                var delay = el.dataset.index * 150
55
                setTimeout(function () {
56
                    Velocity(
57
                        el,
58
                        { opacity: 1, height: '1.6em' },
59
                        { complete: done }
60
                    )
61
                }, delay)
62
            },
63
            leave: function (el, done) {
64
                var delay = el.dataset.index * 150
65
                setTimeout(function () {
66
                    Velocity(
67
                        el,
68
                        { opacity: 0, height: 0 },
69
                        { complete: done }
70
                    )
71
                }, delay)
72
            },
73
        },
74
    })
75
</script>