Yuyy
Yuyy
十一.Vue过渡动画

1. 使用过渡类

<style>
  .v-enter,.v-leave-to{
    opacity: 0;
    transform: translateX(200px)
  }
  .v-enter-active,.v-leave-active{
    transition: all 0.8s ease
  }
</style>

<transition>
  <h1 v-if="flag">Hello</h1>
</transition>
  • 修改前缀v-,使用局部定义
.my-enter,
.my-leave-to {
  opacity: 0;
  transform: translateY(70px);
}

.my-enter-active,
.my-leave-active{
  transition: all 0.8s ease;
}
<transition name="my">
  <h6 v-if="flag2">这是一个H6</h6>
</transition>

2. 使用第三方类

<link rel="stylesheet" href="../lib/animate.css">
 <!-- 使用  :duration="{ enter: 200, leave: 400 }"  来分别设置 入场的时长 和 离场的时长  -->
    <transition 
      enter-active-class="animated bounceIn"
      leave-active-class="animated bounceOut"
      :duration="{enter:200,leave:400}"
    >
      <h1 v-if="flag">Hello</h1>
    </transition>

Animate样式参考

3. 使用钩子函数模拟小球半场动画(类似添加商品到购物车)

<style>
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
  }
</style>
<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 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
      }
    }
  });
</script>

4. 列表动画

  <style>    
    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 和 .v-leave-active 配合使用,能够实现列表后续的元素,渐渐地漂上来的效果 */
    .v-move {
      transition: all 0.6s ease;
    }
    .v-leave-active{
      position: absolute;
    }
  </style>
<!-- 在实现列表过渡的时候,如果需要过渡的元素,是通过 v-for 循环渲染出来的,不能使用 transition 包裹,需要使用 transitionGroup -->
<!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个 元素 设置 :key 属性 -->
<!-- 给 ransition-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>

发表评论

textsms
account_circle
email

  • http://0.gravatar.com/avatar/fb21548fde93a47e88c9c75d46784875?s=80&d=wavatar&r=g
    MiMonarchRD

    老余你应该弄一个demo演示的网址

    1年前回复

Yuyy

十一.Vue过渡动画
1. 使用过渡类 <style> .v-enter,.v-leave-to{ opacity: 0; transform: translateX(200px) } .v-enter-active,.v-leave-active{ transition: all 0.8s ease }…
扫描二维码继续阅读
2020-02-09
友情链接
标签
文章归档
近期文章