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

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

先来介绍`is-show`属性

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

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

因为我们的页面用到了element-ui组件，所以要先在main.js中引入这个组件

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //样式

Vue.use(ElementUI) //就能全局访问了

在路由下加一个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

先写一部分样式，便于更好的观察效果：

<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

前面我们把is-show设为了false,所以我们现在页面上是看不到东西的，我们这里用生命周期，让页面在加载的时候，把我们页面元素的is-show值变为true，使其在页面上显示出来：

<script>
export default {
  data() {
    return {
      showLogin: false
    }
  },
  mounted() {
    this.showLogin = true
  }
}
</script>

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

为我们的登录页面元素外面包一个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），提供类名。

这个过程可以这样理解：整个过程分为两段：进场、出场。

进场时is-show由false->true(本例只用到了这种情况)，同时，进场时会生成类名。
form-fade-enter发生时间很短，在元素插入之前生效。在插入之后的下一帧被移除消失。刚开始时，虽然show为true，但我们把透明度设为0了，所以元素马上就不可见了
form-fade-enter-active是在进入的过程之中，也就是transition发生的时间，这里是1s钟。
出场，form-fade-leave类名开始，离开的开始，一帧。form-fade-leave-active 离开那一霎那。

结合样式理解：

刚开始的时候，那一霎那，opacity透明度为0，原来的form_container上面没有设置opacity，所以最开始是为1的；同时将form_container的transform 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的配合，知识储备不足，只是想把知道的分享出来，欢迎指出不足，提出建议！