Vue中用一个动态登录效果了解transition与is-show的配合

3,851 阅读5分钟

用一个登录效果了解transition与is-show的配合

在登录界面,如果登录框能有一个动态效果,那无疑是十分吸引眼球的,而这个动态效果,就用到了vue的内置模块transition标签与is-show属性。

先来介绍is-show属性

is-show属性与is-if属性的区别

先写一个基本页面,用它的html内容来展示二者的不同

  1. 因为我们的页面用到了element-ui组件,所以要先在main.js中引入这个组件
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //样式

Vue.use(ElementUI) //就能全局访问了
  1. 在路由下加一个login路由,在views下建一个Login.vue,我们的这个例子的主要代码就放在这里。
<template>
  <div class="login_page fillcontain">
    <section class="form_container form-fade-enter" v-show="showLogin">
        <div class="manage_tip">
          <p>elm后台管理系统</p>
        </div>
     </section>
  </div>
</template>

v-show简单来说,就是决定页面元素是否显示在页面中,是一个Boolean值。我们今天主要要看的就是它和v-if的区别,我们可以直接看效果:

  • 用v-if时的html

  • 用v-show时的html

从图片就能清楚地看到两者的区别了吧,没错,用v-if,是不会输出其中的元素的,而用v-show,为false时,他依旧会输出其中的html元素,这也是为什么接下来我们要使用的是v-show而不是v-if。

transition

  1. 先写一部分样式,便于更好的观察效果:
<style lang="stylus" scoped>
.login_page
  height 100vh
  background-color #324057
.manage_tip
  position absolute
  width 100%
  top -100px
  left 0
  p
    font-size 34px
    color #ffffff
.form_container
  width 320px
  height 240px
  position absolute
  top 50%
  left 45%
  margin-top -160px
  margin-left -120px
  padding 25px
  border-radius 5px
  text-align center
  background-color #ffffff
  1. 前面我们把is-show设为了false,所以我们现在页面上是看不到东西的,我们这里用生命周期,让页面在加载的时候,把我们页面元素的is-show值变为true,使其在页面上显示出来:
<script>
export default {
  data() {
    return {
      showLogin: false
    }
  },
  mounted() {
    this.showLogin = true
  }
}
</script>

我们可能会有一个疑问:既然这里都要在页面加载的时候让元素出现,那么为什么一开始的时候就不设为true呢?为什么要多此一举的之前要把is-show值设false呢?后面会进行解释。

  1. 为我们的登录页面元素外面包一个transition
<transition name="form-fade">
    <section class="form_container form-fade-enter" v-if="false">
        <div class="manage_tip">
          <p>elm后台管理系统</p>
        </div>
    </section>
</transition>

transition是vue的一个内置组件,会为页面带来特效,它被触发,是当它的子元素从不显示到显示的过程中被触发的,这也就是为什么,我们之前要先吧is-show设为false,然后又再把它用生命周期函数变为true,就是为了能让页面元素在加载的瞬间实现元素从有到无,以便transition的触发。
而实现动态效果的关键就在于下面的样式:

.form-fade-enter-active, .form-fade-leave-active
  transition all 1s //过程花多长时间
.form-fade-enter, .form-fade-leave-active
  transform translate3d(0, -50px, 0)
  opacity 0 

这是刷新页面一瞬间的html,可以看到,这里有我们之前没定义的几个类名:'form-fade-enter-active''form-fade-enter-to',同时可以看到transition这个标签是没有出现的。

transition是一个效果型组件,transition在完成它的任务之后就会消失,并且这个组件如果要有效果,v-show的设置是必然的。因为需要一个元素的“进场”的切换。才会触发transition。
“进出场”的切换时会产生四个类名:

  • form-fade-enter 定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。刚开始的时候,那一霎那,透明度为0的,form_container一开始时*没有设置透明度的,原始opacity为1的。
  • form-fade-enter-active 用来定义进入过渡的过程时间。
  • form-fade-leave 离开的开始状态,一帧。
  • form-fade-leave-active 离开
    自定义的transition的name:form-fade,等下添加特效的前缀(约定要有一个v-show或v-if),提供类名。
  1. 这个过程可以这样理解:整个过程分为两段:进场、出场。
  • 进场时is-show由false->true(本例只用到了这种情况),同时,进场时会生成类名。
    form-fade-enter发生时间很短,在元素插入之前生效。在插入之后的下一帧被移除消失。刚开始时,虽然show为true,但我们把透明度设为0了,所以元素马上就不可见了
    form-fade-enter-active是在进入的过程之中,也就是transition发生的时间,这里是1s钟。
  • 出场,form-fade-leave类名开始,离开的开始,一帧。form-fade-leave-active 离开那一霎那。
  1. 结合样式理解:
  • 刚开始的时候,那一霎那,opacity透明度为0,原来的form_container上面没有设置opacity,所以最开始是为1的;同时将form_containertransform translate3d(0, -50px, 0)放在-50px的位置,而我们显示出来的状态就是真正进入也就是结束时的样式:opacity为1,translate为0(因为我们都没有设置),所以有一种从上往下来的动态效果。
  • 离开时,is-show由true->false那一瞬间产生form-fade-leave-active 这个类名此时样式是原来的样式(未设置是默认的样式):opacity为1,transition为0px,那么要消失时就意味着要跟原来状态相反:opacity为0,transition3d变成-50px。
    所以只要记住他们最后的状态是什么(也就是跟已有的样式是反着来的),而期间的过渡效果交给transition来做。 如果我没讲的很清楚话可以查看文档,或许能有所帮助。

这里是结尾

本文是一个关于Vue中用一个动态登录效果了解transition与is-show的配合,知识储备不足,只是想把知道的分享出来,欢迎指出不足,提出建议!