vue动画

来源：互联网发布：慕课网python教程编辑：程序博客网时间：2024/06/15 17:43

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>

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

1.activated：keep-alive 组件激活时调用。
2.deactivated：keep-alive 组件停用时调用。

阅读全文

0 0