vue动画

最新推荐文章于 2023-06-10 23:34:33 发布

tongwandouQX

最新推荐文章于 2023-06-10 23:34:33 发布

阅读量376

点赞数

分类专栏： vue.js 文章标签： vue

本文链接：https://blog.csdn.net/qianxing111/article/details/78521181

版权

vue.js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

document.customMenu:在document对象上挂一个属性：customMenu。

进入/离开 & 列表过渡

vue 在插入、更新或者移除DOM时，提供多种不同方式的应用过渡效果。

在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css
在过渡钩子函数中使用 JavaScript 直接操作 DOM
可以配合使用第三方 JavaScript 动画库，如 Velocity.js

单元素/组件的过渡

vue提供了 transition 的封装组件，在下列情形中，可以给任何元素和-组件添加 entering/leaving 过渡。

- 条件渲染 (使用 v-if)
- 条件展示 (使用 v-show)
- 动态组件
- 组件根节点</br>

注意：
- 组件更新一定会引起组件的DOM更新；
- 组件更新是由组件本身的某些属性发生变化引起的，如上述四种情况都是会引起组件更新，从而会有动画；
- 组件内容发生变化，组件不会有过渡动画。因为组件内容是组件的子集，不是组件本身。

css过渡

<code>
    <style media="screen">
        .miaov-a-active {
            position: absolute;
            transition: all 1s
        }
        .miaov-enter {
            left: 100px;
        }
        .miaov-enter-to {
            left: 0px;
        }

        .miaov-leave-active {
            transition: all 2s
        }
        .miaov-leave {
            opacity: 1;
        }
        .miaov-leave-to {
            opacity: 0;
        }

    </style>
    <script src="../js/vue.js" charset="utf-8"></script>
</head>
<body>      
    <div id="app">
        <button @click="show = !show">按钮</button>
        <transition name="miaov">
            <p v-show="show">内容</p>
        </transition>
    </div>

    <script type="text/javascript">

        new Vue({
            el: '#app',
            data: {
                show: false
            }
        })

    </script>
</code>

JavaScript 钩子

<code>
    <div id="app">
        <button @click="show = !show">按钮</button>

        <transition
            @before-enter="beforeEnter"
            @enter="enter"
        >
            <p v-show="show">内容</p>
        </transition>
    </div>

    <script type="text/javascript">

        new Vue({
            el: '#app',
            data: {
                show: false
            },
            methods: {
                beforeEnter(el) {
                    $(el).css({opacity: 0})
                },
                enter(el) {
                    console.log(el);
                    $(el).animate({
                        opacity: 1
                    }, 1000);
                }
            }
        })  
    </script>
</code>

动态组件添加动画

动态组件

通过使用保留的元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。

keep-alive
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：

-添加动画

<code>
    <style media="screen">
        .miaov-enter-active {
            position: absolute;
            transition: all 1s
        }
        .miaov-enter {
            left: 100px;
        }
        .miaov-enter-to {
            left: 0px;
        }

        .miaov-leave-active {
            transition: all 2s
        }
        .miaov-leave {
            opacity: 1;
        }
        .miaov-leave-to {
            opacity: 0;
        }
    </style>
</head>
<body>  
    <div id="app">
        <button @click="currentView='home'">home</button>
        <button @click="currentView='list'">list</button>
        <button @click="currentView='about'">about</button>
        <keep-alive>
            <transition name="miaov">
                <component v-bind:is="currentView">
                    <!-- 组件在 vm.currentview 变化时改变！ -->
                </component>
            </transition>
        </keep-alive>
    </div>
    <script type="text/javascript">

        new Vue({
            el: '#app',
            data: {
                currentView: 'home'
            },
            components: {
                home: {
                    template: '<h1>home</h1>',
                    destroyed() {
                        console.log('home destroyed');
                    },
                    activated() {
                        console.log('home activated');
                    },
                    deactivated() {
                        console.log('home deactivated');
                    }
                },
                list: {
                    template: '<h1>list</h1>',
                    activated() {
                        console.log('list activated');
                    },
                    deactivated() {
                        console.log('list deactivated');
                    }
                },
                about: {
                    template: '<h1>about</h1>'
                }
            }
        })

    </script>
</code>

注意：这里涉及到生命周期中的两个钩子函数：