vue学习五：vue动画

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

原创最新推荐文章于 2023-04-28 09:44:36 发布 · 254 阅读

1 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

15 篇文章

订阅专栏

不使用vue动画实现动画效果：

首先设置vue对象装载位置的html代码：

<div id="app">
  <input type="button" value="toggle" @click="flag=!flag">
  <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
  <h3 v-if="flag">这是一个H3</h3>
</div>

然后设置实例选项：

el: '#app',
data: {
  flag: false
},
methods: {}

效果：

不使用vue动画的动画

使用vue动画：

使用过渡类名：

HTML结构：

<div id="app">
  <input type="button" value="toggle" @click="flag=!flag">
  <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
  <!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->
  <!-- transition 元素，是 Vue 官方提供的 -->
  <transition>
    <h3 v-if="flag">这是一个H3</h3>
  </transition>
</div>

VM 实例：

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    flag: false
  },
  methods: {}
});

定义两组类样式：

/* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
/* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(150px);
}

/* v-enter-active 【入场动画的时间段】 */
/* v-leave-active 【离场动画的时间段】 */
.v-enter-active,
.v-leave-active{
  transition: all 0.8s ease;
}

注意：opacity默认值为1，样式代码中省略了

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

如果要自定义过渡类名，需要在transition标签中加一个name属性，name属性的值可以替换过渡类名中的默认类名前缀v，可以用来区分不同组之间的动画

<transition name="my">
  <h6 v-if="flag2">这是一个H6</h6>
</transition>

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

.my-enter-active,
.my-leave-active{
  transition: all 0.8s ease;
}

使用第三方 CSS 动画库：

导入动画类库：

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

定义 transition 及属性：

<transition

  enter-active-class="fadeInRight"

leave-active-class="fadeOutRight"

:duration="{ enter: 500, leave: 800 }">

  <div class="animated" v-show="isshow">动画哦</div>

</transition>

使用动画钩子函数

<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>

在这里面before-enter、enter、after-enter、enter-cancelled、before-leave、leave、after-leave、leave-cancelled是类似于click一样的事件

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

使用钩子函数实现半场动画

首先设置小球的基本样式：

.ball {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
}

vm实例挂载位置：

<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>

vm实例：

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    flag: false
  },
  methods: {
    // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
    // 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
    beforeEnter(el){
      // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
      // 设置小球开始动画之前的，起始位置
      el.style.transform = "translate(0, 0)"
    },
    enter(el, done){
      // 这句话，没有实际的作用，但是，如果不写，出不来动画效果；
      // 可以认为 el.offsetWidth 会强制动画刷新
      el.offsetWidth
      // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
      el.style.transform = "translate(150px, 450px)"
      el.style.transition = 'all 1s ease'

      // 这里的 done， 其实就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
      done()
    },
    afterEnter(el){
      // 动画完成之后，会调用 afterEnter
      // console.log('ok')
      this.flag = !this.flag
    }
  }
});

实现效果：

列表过渡：

基本样式：

li {
  border: 1px dashed #999;
  margin: 5px;
  line-height: 35px;
  padding-left: 5px;
  font-size: 12px;
  /* 必须要加上，因为后面的定位position:absolute会是元素脱标 */
  width: 100%;
}

li:hover {
  background-color: hotpink;
  transition: all 0.8s ease;
}

动画过渡类：

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

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

实现列表后续的元素，渐渐地漂上来的效果，记住：

.v-move {
  transition: all 0.6s ease;
}
.v-leave-active{
  position: absolute;
}

vm实例挂载位置：

<div id="app">
  <div>
    <label>
      Id:
      <input type="text" v-model="id">
    </label>

    <label>
      Name:
      <input type="text" v-model="name">
    </label>

    <input type="button" value="添加" @click="add">
  </div>
  <!-- <ul> -->
    <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
    <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
    <!-- 给 transition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
    <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
    <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>
  <!-- </ul> -->
</div>

vm实例：

// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
  el: '#app',
  data: {
    id: '',
    name: '',
    list: [
      { id: 1, name: '西游记' },
      { id: 2, name: '红楼梦' },
      { id: 3, name: '水浒传' },
      { id: 4, name: '三国演义' }
    ]
  },
  methods: {
    add() {
      for(item in this.list){
        if(this.id==this.list[item].id){
          console.log(this.list[item].id);
          this.id='';
          this.name='';
        }
      }
      if(this.id != '' && this.name != ''){
        this.list.push({ id: this.id, name: this.name })
      }
      this.id = this.name = ''
    },
    del(i) {
      this.list.splice(i, 1)
    }
  }
});

实现效果：