vue进入/离开 & 列表过渡

vue进入/离开 & 列表过渡

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

包括以下工具：

在 CSS 过渡和动画中自动应用 class

可以配合使用第三方 CSS 动画库，如 Animate.css

在过渡钩子函数中使用 JavaScript 直接操作 DOM

可以配合使用第三方 JavaScript 动画库，如 Velocity.js

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

条件渲染 (使用 v-if)

条件展示 (使用 v-show)

动态组件

组件根节点

<div id="demo">

   <button @click="show = !show">Tigglebutton>

    <transition name="fade">

        <p v-if="show">hellop>

    transition>

    <nav class="nav">

        <ul>

            <li>

                <a href="#" @click="show = !show">首页a>

                <transition name="fade">

                    <ul class="submenu" v-if="!show">

                        <li>首页5li>

                        <li>首页4li>

                        <li>首页3li>

                        <li>首页2li>

                    ul>

                transition>

            li>

            <li><a href="#">理念a>li>

            <li><a href="#">历史a>li>

            <li><a href="#">关于我们a>li>

            <li><a href="#">联系我们a>li>

        ul>

    nav>

div>

new Vue({

    el:'#demo',

    data:{

        show :true

    }

})

<CSS>

.fade-enter-active,.fade-leave-active{

    transition: opacity 0.5s;

}

.fade-enter,.fade-leave-to{

    opacity:0;

}

常用的过渡都是css过渡

**vue知识点**

1.*v-on:click  简写成 @click

2.对于这些在 enter/leave 过渡中切换的类名，v- 是这些类名的前缀。使用 可以重置前缀，比如 v-enter 替换为 my-transition-enter。