更新于

Vue 过渡

发布于 / 分类: vue前端开发快速入门与专业应用 / 暂无评论 / 阅读量: 57

class类名之间的区别

单个说明不是很好理解,我们直接看它的流程图

v-enter(动效开始之前)>------>------>------>v-enter-to(动效结束)
v-leave(动效开始之前)>------>------>------>v-leave-to(动效结束)

这两个表示一个来回,第一次点击运行第一个v-enter,第二次点击运行v-leave,这样有来有回就产生动效。

两个动效一般都不会在类名里面写transition:all .3s;这种来控制动效时间,他们都有一个通用的类名,在开始到结束一直存在的:

v-enter-active 第一次的
v-leave-active 第二次的
这两个主要存放动效的transition属性

假设我们要做一个opacity的过渡,我们要这样写

.v-enter {
  opacity:0;
}
.v-enter-to {
  opacity:1;
}
.v-enter-active {
  transition: opacity 1s ease;
}

这样写表示第一个流程,第二个流程实际上就是反过来,css就没必要重新写了,直接共用

.v-enter,.v-leave-to {
  opacity:0;
}
.v-enter-to,.v-leave {
  opacity:1;
}
.v-enter-active,.v-leave-active {
  transition: opacity 1s ease;
}

那么这里一个动效类名就写好了,实际上这个类名就是vue默认调用的一个类名,也就是如果你没有指定transition元素name属性,他就会默认使用这个类名作为切换的效果。

注意:过渡的是active记得要写在最后,让他的css权限比enter,leave大,以免过渡时这两个里面写了transition属性造成动效出现问题!

实际上这个css还可以继续简写,我们元素默认就是显示的,不管opacity为1,他也是显示的,除非你设置为0,那么vue操作类名的时候不会像jq一样,操作完结束时是什么,元素上就是什么,vue会将class类名全部清除掉,就好像动效之后什么都没有发生,那么我们甚至可以不写结束时的类名。

首先我们看下流程:

第一次点击,元素先添加了.v-enter,瞬间将元素设置为动效开始前的状态,此时元素透明为0,然后移除.v-enter,接着添加.v-enter-active和v-enter-to通过active产生动效,当他达到1时,class被清除。

第二次点击,也是一样。

那么由于元素本身就是现实的,移除opacity,不设置动效结束时opacity为1,在active的影响下元素也会发生透明度动效。

以上就是class类名的理解,然后就是自定义类名了,因为我们不可能都是使用默认的吧!

自定义类名

transition有一个name属性,它的值可以为自定义的class类名,比如name=“fade”

然后我们创建一个fade的cass效果

.fade-enter,.fade-leave-to {
  opacity:0;
}
.fade-enter-to,.fade-leave {
  opacity:1;
}
.fade-enter-active,.fade-leave-active {
  transition: opacity 1s ease;
}

实际上我们只需要把之前的class类名v改为我们自己的name值,然后就可以了,vue会自动补全后面的值,因为后面的都是固定的,所以在设置的时候,只需要name=“fade”即可。

动态绑定动效名

只要为transition的name绑定一下就行了

<transition :name="transitonName"></transition>

绑定后他会去获取data里面的transitonName的值,当我们修改了它的transitonName的值时,transition的name值也会发生变化,这样就可以做到随心变化了,我们只需要设置好css效果然后添加就行了,每次只用改data里面的值,这样就不用在繁多的transition中一个个修改。

引入animate动画库

css动画库有一个比较有名的,就是animate.css了,vue可以通过引入这个css文件然后使用它提供的动画效果。

animate官网

下载后在head里link引入这个css文件,然后在vue的transition元素上添加一下是哪个属性:

  1. enter-active-class 表示第一次动画效果
  2. leave-active-class 表示第二次动画效果
  3. :duration 表示动画的时间
<transition 
  enter-active-class="animated bounceIn"
  leave-active-class="animated bounceIn"
  :duration="{enter: 500, leave: 800 }"
  >
     <div v-show="show"></div>
</transition> 

enter-active-class和leave-active-class如果引入的是animate.css前面一定要加上animated专门的class类名。

animated这个类名实际上就是设置了动画的时间以及循环次数,一般来说官方在每个动画class上都预设好了对应的时间,懒人就可以直接用,所以我测试不写这个的话,也没什么问题。

而:duration也可以不用,因为css里面都设置好了时间,如果你想调整时间又不想去动css,那就直接使用这个属性,该属性的值有两种方式:

:duration="{enter: 500, leave: 800 }"
//这种表示enter的用时,leave的用时,单位s
:duration="500"
//这种表示enter和leave都是500s

以上就是引入第三方动画库的使用教程。

详解transition标签

transition除了支持以上那些属性外,还有几个属性值得一看:

  1. appear
  2. mode

appear是一个单属性,表示transition里的子元素第一次渲染是是否使用动画效果,默认是不显示动画效果的。

<transition appear
  enter-active-class=" bounceIn"
  leave-active-class=" bounceIn"
  >
    <div v-show="show"></div>
     
</transition> 

mode表示动画的过渡顺序,如果transition里面有v-if/v-else,他们的动画触发是同时存在的,也就是同时发生,这就会造成一些问题,比如我想让这个按钮先消失,另一个才出来,于是便要用到mode了

有两个个值:

  1. out-in 表示隐藏/消失的元素动画先运行,在运行显示的动画
  2. in-out 表示先运行显示的元素动画,隐藏/消失的在之后运行
<transition name="fade" mode="out-in">
  <!-- ... the buttons ... -->
</transition>

函数钩子

transition也可以使用纯js来操作动效,这里就要用到函数钩子,每个钩子就好像class的类名一样,什么状态做什么操作,所有的操作方法全部写在vue对象实例的methods对象里面。

首先说一下有哪些钩子

  1. beforeEnter 动画开始之前的初始状态
  2. enter 动画进行中的状态
  3. afterEnter 动画完成后状态
  4. enterCancelled 进入过渡被打断时
  5. beforeLeave 第二次动画开始前的初始状态
  6. leave 第二次动画进行中的状态
  7. afterLeave 第二次动画完成后的状态
  8. leaveCancelled 动画过渡被打断的状态

为了更方便理解我想到一个理解方式,你可以把enter作为显示时调用的动画,leave作为隐藏是调用的动画,之前的那些动画运行的类名也可以这么认为。

html写法:

<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"
  >
    <div v-show="show"></div>
</transition>

js

var app = new Vue({
    el: '#app',
    data: {
        show: true
    },
    methods: {
        beforeEnter(el) {
            console.log('show动画开始前', el)
        },
        enter(el) {
            console.log('show动画进行中', el)
        },
        afterEnter(el) {
            console.log('show动画结束后', el)
        },
        enterCancelled(el) {
            console.log('show动画被打断', el)
        },
        beforeLeave(el) {
            console.log('hide动画开始前', el)
        },
        leave(el) {
            console.log('hide动画进行中', el)
        },
        afterLeave(el) {
            console.log('hide动画结束后', el)
        },
        leaveCancelled(el) {
            console.log('hide动画被打断', el)
        }
    }
});

每个绑定的对应的函数都 有一个参数,这个参数就是动画元素本身的dom元素。

在实际测试中被打断的状态一直没测试出来,所以这两个用不到,以后碰到了再单独讲讲,在元素显示和隐藏是这几个钩子函数会依次运行,开始---进行---结束,通过el参数进行原生的js改动样式。

(稍微看了下,打断的触发,在v-if时是不会触发的,而在v-show时便会触发,主要区别就是当元素还在进行过渡是改变的绑定的show的值,true改为false,v-if会继续执行未完成的动画,比如先true,瞬间又改为false,那么元素会从show动画执行完再执行hide动画,再移除元素,而v-show则是show动画停止了,被打断,然后马上执行hide动画,再display:none!实际测试硬是没感觉出来,也没触发到,用处不大)

但是实际上,即便我们写了钩子函数,没有填写name属性,vue也会默认添加默认的class类名v-enter这些,所以如果你想你的动效全部都交给js来做,记得添加一个name=“xxxxx”的无意义命名,只要这个类名css中没有写过样式就行,这样就是可以全权交由js负责了。

js动画库

我找到一个开源的js动画库,但是目前还没搞清楚怎么使用,先分享出来

anijs.js

vue2.0新增加的动画函数钩子

我们之前讲过appear可以让元素在第一次渲染时,也就是第一次show的时候触发动画效果,那么2.0也更新的对应的钩子。

  1. before-appera 初次显示前的初始状态
  2. appera 初次显示中
  3. after-appear 初次显示结束

一共就三个,使用方法和之前的钩子函数一样,通过v-bind绑定methods中对应的函数,然后el的原生dom参数,js控制。

transition-group

一般来说,一个transition包裹一个元素,然后给该元素添加show、hide动效,但是我们可以通过v-if/v-else判断,可以让两个元素都可以使用该动画,但是这基本上就是“二龙不想见”,如果我们要有很多个元素怎么都用同一个动画,你不可能每个都用一个transition标签包裹吧!

所以这里就有了transition-group标签了,这个标签可以给他里面的元素添加统一的过渡样式。

样式设置和transition一样,只是没有了mode这个属性。

要求:

子元素都要有一个唯一的key值,我们知道v-for的时候可以用index数组下标作为它唯一的key值,如果不是v-for你其实可以瞎鸡儿编的,只要key值唯一就行,你纯字符也行啊。

transition-group支持一个tag的属性,tag="ul"表示所有的子元素将被ul元素包裹,实际上就是把transition-group标签替换成ul了,通这个属性可以自由控制包裹的父元素。

<transition-group tag="ul" name="fade" appear>
  <li v-for="(item,index) in items" :key="index">{{item.text}}</li>
</transition-group>
var app = new Vue({'
  el : '#app',
  data : {
    items : [
      {id:1,text:"第一个"},
      {id:2,text:"第二个"}
      {id:3,text:"第三个"}
      {id:4,text:"第四个"}
     ]
  }
});

基本vue的过渡就到这里了,以后有机会再来实践!

暂无评论

设置
配色方案

布局