Vue——09-02Vue过渡以及简单的动画实现

Vue过渡

Vue动画相比较css中的动画比较复杂一些，需要用到新的类名

下面是官网给出的解释：

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

看个例子：

!DOCTYPE html>
    
html>
    
    head>
    
  meta charset="utf-8">
    
  title>
    /title>
    
  script src="https://cdn.jsdelivr.net/npm/vue">
    /script>
    
    /head>
    
    body>
    
  div id="app">
    
    button type="button" @click="show=!show">
    点击我及消失/button>
    
    h1 v-if="show">
    Nanchen消失不见/h1>
    
  /div>
    
  script type="text/javascript">

    const vm = new Vue({

    el:'#app',
    data(){

        return{

      show:true,
        }

    }
,
    }
    )
  /script>
    
    /body>
    
/html>
    

效果如下：

这样显得比较僵硬，这时就需要一个过渡效果来解决生硬问题

把需要进行过渡的标签外套上一个transition> ,例如：

transition>
    
    h1 v-if="show">
    Nanchen消失不见/h1>
    
/transition>
    

这里写上name以便对过渡效果名相匹配，如果不写name，则需在类名前加v-，这里建议写上name防止多个动画发生冲突

transition name="fade">
    
    h1 v-show="isShow">
    Nanchen消失不见/h1>
    
/transition>
    

CSS样式：

.fade-enter,
    .fade-leave-to {
    
    opacity: 0;

    }

    .fade-enter-active,
    .fade-leave-active {
    
    transition: opacity 3s;

    }
    

效果如下:

Vue动画

CSS 动画用法类似 CSS 过渡，但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

!DOCTYPE html>
    
html>
    
    head>
    
  meta charset="utf-8">
    
  title>
    /title>
    
  script src="https://cdn.jsdelivr.net/npm/vue">
    /script>
    
  style type="text/css">

  button{
    
    display: block;

  }

  h1{
    
    border: 1px solid black;
    
    display: inline-block;

  }

    @keyframes carroon{

    0%{
    
        transform: translate(0,0);

    }

    25%{
    
        transform: translate(0,100px);

    }

    50%{
    
        transform: translate(100px,100px);

    }

    75%{
    
        transform: translate(100px,0);

    }

    100%{
    
        transform: translate(0,0);

    }

    }

    /* 注意：这里是animation而不是transition */
    .carroon-leave-active{
    
    animation: carroon 1s;
 
    }

    .carroon-enter-active{
    
    animation: carroon 1s;
 
    }
    
  /style>
    
    /head>
    
    body>
    
  div id="app">
    
    button type="button" @click="btnClick">
    点击执行动画/button>
    
    transition name="carroon">
    
    h1 v-show="isShow">
    一个盒子/h1>
    
    /transition>
    
  /div>
    
  script type="text/javascript">

    const vm = new Vue({

    el: '#app',
    data() {

        return {

      isShow: true
        }

    }
,
    methods: {

        btnClick() {

      this.isShow = !this.isShow
        }

    }

    }
    )
  /script>
    
    /body>
    
/html>
    

效果如下：

同时使用过渡和动画

Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

初始渲染的过渡

可以通过 appear 特性设置节点在初始渲染的过渡

transition appear>
    
  !-- ... -->
    
/transition>
    
!DOCTYPE html>
    
html>
    
head>
    
    meta charset="utf-8">
    
    title>
    Vue 测试实例/title>
    
    script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">
    /script>
    
    link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
    
    style>

        .fade-enter,.fade-leave-to {
    
            opacity: 0;

        }

        .fade-enter-active,.fade-leave-active {
    
            transition: opacity 1s;

        }
    
    /style>
    
/head>
    
body>
    
    div id="databinding">

        transition :duration="{
 enter: 5000, leave: 10000 }
    " name="fade" type="transition" appear
            enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active"
            appear-active-class="animated swing">
    
            p v-if="show">
    动画/p>
    
        /transition>
    
        button v-on:click="show = !show">
    点我/button>
    
    /div>
    
    script type="text/javascript">

        new Vue({

            el: '#databinding',
            data: {

                show: true
            }

        }
    )
    /script>
    
/body>
    
/html>
    

效果如下：

关于router的过渡动效

把router-view> 标签用transition> 标签包裹起来即可

加一个name的值，加了值后开头必须以test-......

transition name="test">
    
      router-view>
    /router-view>
    
    /transition>
    

再在下面设置style样式即可

.test-enter,
.test-leave-to {
    
  opacity: 0;

}

.test-enter-to,
.test-leave {
    
  opacity: 1;

}

.test-enter-active,
.test-leave-active {
    
  transition: all 1s;

}
    

即可实现页面之间的过渡效果

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！