vue过渡动画transition使用/过渡模式

责编:menVScode 2017-12-05 17:54 阅读(1729)

过渡效果

        提供了 transition 的封装组件,添加过渡动画;通过添加删除css类名来实现。

过渡的css类名:默认的前缀是 "v-"开头

        v-enter:定义进入过度的开始状态;

        v-enter-active:定义进入活动状态;

        v-enter-to:定义进入的结束状态;

        v-leave:定义离开过渡的开始状态;

        v-leave-active:定义离开活动状态;

        v-leave-to:定义离开的结束状态;

        使用name属性改变类名前缀

QQ截图20171205165125

demo

<template>
  <div id="app">
    <div class="nav-box">
      <ul class="f-cb">
        <li><router-link to="/" exact tag="div"  event="mouseover">home</router-link></li>
        <li><router-link :to="{path:'/document#abc'}" event="mouseover">document</router-link></li>
        <router-link to="/about" tag="li" event="mouseover">
          <i></i>
          <span>about</span>
        </router-link>
        <li><router-link to="/user" event="mouseover">user</router-link></li>
      </ul>
    </div>
    <div class="content f-cb">
      <transition><!--把想要过渡的组件放在transition标签内-->
        <router-view class="center"></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data(){ return {} }
}
</script>

<style>
  .v-enter{opacity: 0;}
  .v-enter-to{opacity: 1;}
  .v-enter-active{transition: 1s;} /*定义过渡时间*/
  .v-leave{opacity: 1;}
  .v-leave-to{opacity: 0;}
  .v-leave-active{transition: 2s;} 
</style>

        上方代码渲染的结果出现问题:消失的组件过程需要2秒,出来的组件显示过程需要1s。出来的组件已经显示,但是消失的组件还在消失的过程中。由于文档流的原因,出来的组件就会显示在下面,出现共存现象。

GIF777

        解决方案:.center 相对于 .content 绝对定位。

<div class="content f-cb" style="position:relative;">
    <transition><!--把想要过渡的组件放在transition标签内-->
        <router-view class="center" style="position: absolute;top:0;left:0;"></router-view>
    </transition>
</div>

        这时候出来和消失的组件动画都是同时进行的。

GIF222

        现在要求离开的组件完全消失好,出来的组件在显示出来。添加过渡模式。

<div class="content f-cb" style="position:relative;">
    <transition mode="out-in"><!--把想要过渡的组件放在transition标签内-->
        <router-view class="center" style="position: absolute;top:0;left:0;"></router-view>
    </transition>
</div>

过渡模式

        in-out:新元素先进行过渡,完成之后当前元素过渡离开。

        out-in:当前元素先进行过渡,完成之后新元素过渡进入。


动态组件的过渡

<tranistion name="fade" mode="out-in">
  <div :is="currentView"><>
</transition>

多元素过渡

<tranistion name="fade" mode="out-in">
  <p v-if="show">i am show</p>
  <div v-else="show">not show</div>
</transition>

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

前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码