Vue中的动画

最新推荐文章于 2023-04-28 09:44:36 发布

XUPT-前端在逃工程师

最新推荐文章于 2023-04-28 09:44:36 发布

阅读量168

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Dimuzero/article/details/116228922

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.使用过渡类名实现动画

v-enter[时间点]是进入之前元素的其实状态此时还没有进入

v-enter-active[入场动画的时间段]

v-leave-active[离场动画的时间段]

v-leave-to[时间点]是动画离开之后，离开的终止状态，此时元素动画已经结束

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>
    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateX(150px)
    }
    .v-enter-active,
    .v-leave-active {
      transition: all 0.4s ease;
    }
  </style>
</head>

<body>
  <!-- 使用过度类名 -->
  <div id='box'>
    <input type="button" id='btn' value='按钮' @click='flag=!flag'>
<!-- transition把需要被动画控制的元素包裹起来 -->
    <transition>
      <h3 v-show='flag'>这是一个H3标题</h3>
    </transition>
  </div>
  <script>
    var app = new Vue({
      el: '#box',
      data: {
        flag: false
      }
    })
  </script>
</body>

</html>

通过给transition标签添加name属性来实现自定义类名的绑定

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
  <style>

    .my-enter,
    .my-leave-to {
      opacity: 0;
      transform: translateY(50px)
    }

    .my-enter-active,
    .my-leave-active {
      transition: all 0.4s ease;
    }
  </style>
</head>

<body>
  <div id='box'>
    <input type="button" id='btn' value='按钮' @click='flag2=!flag2'>
    <transition name='my'>
      <h6 v-show='flag2'>这是一个H3标题</h6>
    </transition>
  </div>
  <script>
    var app = new Vue({
      el: '#box',
      data: {
        flag1: false,
        flag2: false,
      }
    })
  </script>
</body>

</html>

2.第三方动画类库实现动画

https://www.dowebok.com/demo/2014/98/

1.内部导入插件

<link rel="stylesheet" href="./lib/animate.css">

2.使用

1.transition标签添加enter-active-class和leave-active-class类，类名必须含有animated和需要实现的效果的动画类名

    <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut' :duration='200'>
      <h3 v-if='flag'>这是一个H3标题</h3>
    </transition>

2.animated也可以直接设置给目标元素

<transition enter-active-class='bounceIn' leave-active-class='bounceOut'>
      <h3 v-if='flag' class='animated'>这是一个H3标题</h3>
    </transition>

3.使用:duration='毫秒值',来统一设置入场和立场时候的动画时长

    <transition enter-active-class='bounceIn' leave-active-class='bounceOut' :duration='200'>
      <h3 v-if='flag' class='animated'>这是一个H3标题</h3>
    </transition>

4.通过:duration={ enter:200 ,leave:400 }对象的形式来分别设置出场时长和离场时长

<div id='box'>
    <input type="button" id='btn' value='按钮' @click='flag=!flag'>
    <!-- 使用:duration='毫秒值',来统一设置入场和立场时候的动画时长 -->
    <transition enter-active-class='bounceIn' leave-active-class='bounceOut' :duration='200'>
      <h3 v-if='flag' class='animated'>这是一个H3标题</h3>
    </transition>
  </div>
<script>
    var app = new Vue({
      el: '#box',
      data: {
        flag: false
      }
    })
</script>

3.通过动画的钩子函数来实现动画

1.钩子函数实现动画

动画钩子函数第一个参数：el表示要执行动画的元素，是原生js dom对象（document.getElementById('')获取到的原生JS DOM对象）

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

2.实现购物车小球动画(使用动画钩子函数完成半场动画效果)

<div id='app'>
  <input type="button" value='加入购物车' @click='flag=!flag'>
  <!-- 1.使用transition标签包裹小球 -->
  <transition @before-enter='beforeEnter' @enter='enter' @after-enter='afterEnter'>
    <div class='ball' v-show='flag'></div>
  </transition>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      flag: false
    },
    methods: {
      //动画钩子函数第一个参数：el表示要执行动画的元素，是原生js dom对象
      //document.getElementById('')获取到的原生JS DOM对象
      beforeEnter(el) {
        //beforeEnter 动画入场之前，此时动画尚未开始
        //可以在beforeEnter中设置元素动画开始之前的起始样式
        el.style.transform = 'translate(0,0)'
      },
      enter(el, done) {
        //这句话没有实际作用，但是不写动画无效果
        //可以认为这句话强制动画刷新
        el.offsetWidth
        //enter 表示动画最终的样式
        //设置小球完成动画后的结束状态
        el.style.transform = 'translate(150px,450px)'
        el.style.transition = 'all 1s ease'
        //立即结束enter函数
        done()
      },
      afterEnter(el) {
        //afterEnter 表示动画完成之后的样式
        this.flag = !this.flag
      }
    }
  })
</script>

4.实现列表动画

v-for遍历出来的元素添加动画需要使用transition-group标签包裹

<style>
    ul {
      list-style: none;
    }

    li {
      border: 1px dashed #999;
      padding: 10px 0;
      padding-left: 20px;
      margin-bottom: 10px;
      width: 100%;
    }

    li:hover {
      background-color: pink;
      transition: all 0.6s ease;
      cursor: pointer;
    }

    .v-enter,
    .v-leave-to {
      opacity: 0;
      transform: translateY(80px);
    }

    .v-enter-active,
    .v-enter-leave {
      transition: all 0.6s ease;
    }

    /* .v-move 和 .v-leave-active配合使用实现删除动画 */
    .v-move {
      transition: all 0.6s ease;
    }

    .v-leave-active {
      position: absolute;
    }
</style>  
<div id='app'>
  <div>
    <label for="">
      Id:
      <input type="text" v-model='id'>
    </label>
    <label for="">
      Name:
      <input type="text" v-model='name'>
    </label>
    <input type="button" value='添加' @click='add'>
  </div>
  <!-- 实现列表动画的时候
        v-for循环渲染出来的transition包裹
        需要使用transition-group
      -->
  <!-- 给transition-group添加appear属性，实现入场效果 -->
  <transition-group appear tag='ul'>
    <li v-for='(item,i) in list' :key='item.id' @click='del(i)'>
      {{item.id}}---{{item.name}}
    </li>
  </transition-group>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      id: '',
      name: '',
      list: [
        { id: 1, name: '赵高' },
        { id: 2, name: '秦桧' },
        { id: 3, name: '严嵩' },
        { id: 4, name: '魏忠贤' },
      ]
    },
    methods: {
      add() {
        this.list.push({ id: this.id, name: this.name })
        this.id = this.name = null
      },
      del(i) {
          this.list.splice(i, 1)
      }
    }
  })
</script>