vue14 动画-自学视频

﹏ヽ暗。殇╰゛Y 2022-12-18 15:53 137阅读 0赞

**  01  **

**动画truansition**

> vue本身并不产生动画，它会在元素显示与隐藏时候自动添加一些类名，程序员可以通过这些类名来设计动画

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。

####     ####

#### **语法** ####

**简单列子**

<div id="demo">
    <button v-on:click="show = !show">
        Toggle
    </button>
    <transition name="fade">
    <p v-if="show">hello</p>
    </transition>
    </div>

new Vue({
    el: '#demo',
      data: {
        show: true
      }
    })

syle部分

.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
    opacity: 0;
    }

####  ####

####     ####

#### **过渡的类名** ####

![format_png][]

1.  `v-enter`：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2.  `v-enter-active`：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3.  `v-enter-to`: **2.1.8版及以上** 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 `v-enter` 被移除)，在过渡/动画完成之后移除。
4.  `v-leave`: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5.  `v-leave-active`：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6.  `v-leave-to`: **2.1.8版及以上** 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 `v-leave` 被删除)，在过渡/动画完成之后移除。

CSS 动画

**html**

new Vue({
    el:"#app",
      data:{flag:true},
    methods:{},
    })

**css**

@keyframes fadeIn{
      0%{ opacity: 0; transform:scale(0.7)}
      90%{opacity: .8;transform:scale(1.2)}
      100%{opacity: 1;transform:scale(1)}
    }
    @keyframes fadeOut{
    from{ opacity: 1; transform:scale(1)}
    to{opacity: 0;transform:scale(0.7)}
    }
    .fade-enter-active{
    animation: fadeIn .7s ease;
    }
    .fade-leave-active{
    animation: fadeOut .2s ease;
    }

**  02  **

**自定义过渡的类名**

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用。

**html**

**js**

new Vue({
    el:"#app",
      data:{flag:true},
    })

**导入其他css类库**

**  03  **

动画模式

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了 过渡模式

*  `in-out`：新元素先进行过渡，完成之后当前元素过渡离开。
 *  `out-in`：当前元素先进行过渡，完成之后新元素过渡进入。

new Vue({
    el:"#app",
      data:{flag:true}
    })

@keyframes fadeIn{
      0%{ opacity: 0;}      
      100%{opacity: 1;}
    }
    @keyframes fadeOut{
    from{ opacity: 1;}
    to{opacity: 0;}
    }
    .fade-enter-active{
    animation: fadeIn .7s ease;
    }
    .fade-leave-active{
    animation: fadeOut .2s ease;
    }

[format_png]: /images/20221122/03bda8a05f3b47dd9addfac50373e0c1.png