vue过渡动画tranistion(css过渡)

责编:menVScode 2018-01-29 0:57 阅读(1086)

        transition:表示引入了vue提供的一个内置组件,可以配合name命名进行区分。

        css过渡示意图

QQ截图20171205165125

        接受过渡效果元素的时候,transition 组件会给这个元素在不同阶段的时候添加/删除不同的类名,然后通过css来控制不同阶段的类名,就能实现过渡或者动画。

        类名分为两个阶段:进入阶段(Enter),离开阶段(Leave)。

        过渡的css类名:默认的前缀是 "v-"开头, 使用name属性改变类名前缀。

v-enter:定义进入过度的开始状态;
v-enter-active:定义进入活动状态;
v-enter-to:定义进入的结束状态;
v-leave:定义离开过渡的开始状态;
v-leave-active:定义离开活动状态;
v-leave-to:定义离开的结束状态;

        简单例子

<template>
  <div id="app">
    <button @click="show = !show">显/隐</button>
    <div class="box">
      <transition name="fade">
        <p v-show="show">menvscode.com</p>
      </transition>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'App',
  data(){
    return { }
  }
}
</script>

<style>
.fade-enter-active,.fade-leave-active {
  transition:all 1s ease-out;
}
.fade-enter,.fade-leave-to{
  opacity:0;
}
// 默认 v-leave-to 和 v-leave 的 opacity 为1,可以不用写
</style>

        (1)下面css实现的过渡效果是:元素向上慢慢消失,然后向下慢慢显示。

.my-enter-active,.my-leave-active {
  transition:all 1s;
}
.my-enter,.my-leave-to{
  transform:translateY(-20px);
  opacity:0;
}
.my-enter-to,.my-leave{
  transform:translateY(0px);
  opacity:1;
}

        (2)下面css实现的过渡效果是:元素从左慢慢显示,然后向右慢慢消失。

.my-enter-active,.my-leave-active {
  transition:all 1s;
}
.my-enter,.my-leave-to{
  opacity:0;
}
.my-enter-to,.my-leave{
  opacity:1;
}
.my-enter{
  transform:translateX(-50px);
}
.my-enter-to{
  transform:translateX(0px);
}
.my-leave{
  transform:translateX(50px);
}
.my-leave-to{
  transform:translateX(100px);
}

        (3)下面css实现的过渡效果是:元素从左慢慢显示,然后向下慢慢消失。

.my-enter-active,.my-leave-active {
  transition:all 1s;
}
.my-enter,.my-leave-to{
  opacity:0;
}
.my-enter-to,.my-leave{
  opacity:1;
}
.my-enter{
  transform:translateX(-50px);
}
.my-enter-to{
  transform:translateX(0px);
}
.my-leave{
  transform:translateY(0px);
}
.my-leave-to{
  transform:translateY(50px);
}


        多元素过渡

        (1)v-show

        (2)v-if、v-else:当v-if与v-else的标签名是相同的话,是不会有过渡效果的,必须要指定key值。

        (3)动态组件:is动态绑定组件

        (4)<router-view></router-view>

        过渡模式

        mode="in-out":新元素先进行过渡,完成之后当前元素过渡离开。(默认模式)

        mode="out-in":当前元素先进行过渡,完成之后新元素过渡进入。(用的多)

        

        多元素过渡例子

<template>
  <div id="app">
    <button @click="toggleComp">显/隐</button>
    <div class="box">
      <transition name="my" mode="out-in">
        <p :is="currentView"></p>
      </transition>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import compA from '@/components/a'
import compB from '@/components/b'
export default {
  name: 'App',
  components:{compA,compB},
  data(){
    return {
      currentView:'comp-a'
    }
  },
  methods:{
    toggleComp(){
      if(this.currentView==='comp-a'){
        this.currentView='comp-b'
      }else{
        this.currentView='comp-a'
      }
    }
  }
}
</script>

<style>
.my-enter-active,.my-leave-active {
  transition:all 1s;
}
.my-enter,.my-leave-to{
  opacity:0;
}
.my-enter-to,.my-leave{
  opacity:1;
}
.my-enter{
  transform:translateX(-50px);
}
.my-enter-to{
  transform:translateX(0px);
}
.my-leave{
  transform:translateY(0px);
}
.my-leave-to{
  transform:translateY(50px);
}
</style>
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码