用一个登录效果了解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
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的配合,知识储备不足,只是想把知道的分享出来,欢迎指出不足,提出建议!