vue: 动画的应用(一)

写一个简单的button按钮，点击显示，再点击隐藏。

引入了bootstrap

        <template>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
        <h1>Animations</h1>
        <hr>
        <button class="btn btn-primary" @click="show=!show">点击</button>
        <!-- 点击之后show取反 -->
        <br><br>
        <div class="alert alert-info" v-if="show">我是一句提示语A</div>
        <!-- v-if为true则显示 -->
      </div>
    </div>
  </div>
</template>
<script>
 export default {
 data() {
 return {
        show: false
      }
    }
  }
</script>

<style>

</style>

      

缺点: 没有动画效果。

transition标签的使用

只能包裹单个元素

官方文档: https://cn.vuejs.org/v2/guide/transitions.html

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

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 被删除)，在过渡/动画完成之后移除。

基础使用

        <transition>
 <!-- 只能包裹一个元素 -->
 <div class="alert alert-info" v-if="show">我是一句提示语A</div>
</transition>
      

App.vue中style的样式

transition方法

        /* 进入 */
 .v-enter{
 /* 开始之前 */
 opacity: 0;
  }
 .v-enter-active{
 /* 过程 */
 transition: opacity 2s;
  }
 .v-enter-to{
 /* 目标 */
 opacity: 1;
  }
/* 离开 */
 .v-leave{
 opacity: 1;
  }
 .v-leave-active{
 transition: opacity 2s;
  }
 .v-leave-to{
 opacity: 0;
  }
      

为了区分不同的动画，我们可以给transition加name属性，

animations方法

        <transition name="slide" type="transition" appear>
 <!-- 只能包裹一个元素 -->
 <!-- 以animation为基准消失 -->
 <!-- appear 页面刚加载的时候有动画效果 -->
 <div class="alert alert-info" v-if="show">我是一句提示语B</div>
</transition>
      

style

        /* slide动画 */
 .slide-enter{
 transform: translateY(20px);
  }
 .slide-enter-active{
 animation: slide-in 3s ease-out
  }
 .slid-enter-to{
 transform: translateY(0px)
  }
 .slide-leave{
 transform: translateY(0px)
  }
 .slide-leave-active{
 animation: slide-out 3s ease-out;
  }
 .slide-leave-to{
 transform: translateY(20px)
  }
 /* 进入轨迹 */
 @keyframes slide-in {
    from{
 transform: translateY(20px);
    }
    to{
 transform:  translateY(0);
    }
  }
 /* 离开轨迹 */
 @keyframes slide-out {
    from{
 transform:  translateY(0);
    }
    to{
 transform:  translateY(20px);
    }
  }
      

在animaition中可以不用写-enter、-enter-to、-leave、-leave-to因为已经在keyframs中定义过了。

transition和animaition可以配合使用。

type属性

如果有两个运动时间不同的动画，会出现这个效果，我们可以用type="transition/aimation"来指定以谁来为基准。

appear属性

我们把show的值该为true，让页面一刷新可以显示，如果要有效果，可以加appear属性。

自定义class

如果觉得class名字太长，我们可以自定义

        <transition
 enter-class="enter"
 enter-active-class="active"
 enter-to-class="to">
     <p class="alert alert-info" v-if="show">自定义class</p>
</transition>
      

ccs代码

        .enter{
    opacity: 0;
}
.active{
    transition: opacity 2s;
}
.to{
    opacity: 1;
}
      

一样的效果。

自定义一般是和第三方库使用的..

比如: https://daneden.github.io/animate.css/

我们把它的cdn引入到文件中

        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
      

因为他们是用frams写的库，所有我们只需要enter-active和leave-active就可以。

注意的点: 要多加一个animated的class

        <transition
 enter-active-class="animated bounce"
 leave-active-class="animated rollOut"
>
    <p class="alert alert-info" v-if="show">结合第三方库使用自定义class</p>
</transition>
      

transition也可以进行数据绑定

使用v-if写两个动画，一个出现，一个隐藏。

可以有两种方法:

方法一: 使用不同的元素，比如一个p标签、一个div标签

方法二: 使用相同元素的话，使用不同的key值

因为相同元素，在虚拟dom中，认为这两个元素并没有什么区别，它会直接替换内容，没有动画效果，因为这样减少重排重绘，节省性能

        <transition
 enter-active-class="animated bounce"
 leave-active-class="animated rollOut"
>
    <div class="alert alert-info" v-if="show" key="info">我是v-if</div>
    <div class="alert alert-warning" v-else key="warning">我是v-else</div> -->
</transition>
      

但是发现一个缺点: 第一个还没走，第二个就出现了。

解决: mode属性

out-in: 先出再进

in-out: 先进再出

        <transition
 enter-active-class="animated bounce"
 leave-active-class="animated rollOut"
 mode="out-in">
    <div class="alert alert-info" v-if="show" key="info">我是v-if</div>
    <div class="alert alert-warning" v-else key="warning">我是v-else</div> -->
</transition>
      

总结:

name: 可以替换类名

appear: 为true的情况下刷新的时候拥有动画

type: 以transition或aimation为基准消失(时间)

自定义类名: 可以结合第三方库使用

v-if/v-else: 不同动画的切换(v-show=!show不好使)，需要key