VueJs一步步实现带感的帮助面板

2019/04/10 10:10
阅读数 15

环境

IDE: WebStorm 2019.1.4 系统: Mac OS X 10.15.4 VueJs: 2.6.11 Vue-cli: 4.2.2

前言

  最近一直在忙毕设,前端终于还是对我这个Java小后端下手了o(╥﹏╥)o 可算明白前端大佬们有多不容易。 项目需要用到VueJs,于是在看了半天vue文档后写个小Demo。

效果图

<div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gc9y2c4rhtg30li0mux23.gif"></img></div>

开干

第一步,创建项目环境

WebStorm新建Project -> EmptyProject

<div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca2fsq6emj30li0d8gmn.jpg"></img></div>

终端下使用"vue create"创建vue脚手架工程(不同版本命令可能不同)

项目名称不能含有大写字母

<div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca2oj20w2j30xp03ydgr.jpg"></img></div> 选择default <div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca2z7ali1j308b03k3yn.jpg"></img></div> 终端cd到vue-cli文件夹下,运行"npm run serve",vue-cli3.0版本以下,应该默认是"npm run dev",详见"package.json" <div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca32r5jshj30c305faag.jpg"></img></div> <div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca3aeb2mrj311a0dbac8.jpg"></img></div> 点击链接 <div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca3d9sy3vj30p70gndl2.jpg"></img></div>

第二步,敲哩个敲

好了,开始敲代码o( ̄︶ ̄)o

新建组件文件

components 文件夹右键 -> new -> Vue component -> IntroductionPanel。 为什么是"Introduction"? 因为这是用来引导用户注册的。

<div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca3fs15pqj30c4092q3m.jpg"></img></div>

接着修改 App.vue 文件的 <template><script> 节点,把原来的组件删了,把自定义的 IntroductionPanel 放进来。

<template>
  <IntroductionPanel></IntroductionPanel>
</template>

<script>
import IntroductionPanel from "./components/IntroductionPanel"

export default {
  name: 'App',
  components: {
    IntroductionPanel
  }
}
</script>

<font color=red>当然也可以直接修改 main.js 编辑应用的入口</font>

编写代码

一、 在 IntroductionPanel.vue 文件的 <template> 节点下创建一个 <div> 用来装载所有的组件。

<template>
        <div class="introduction introduction-panel">

        </div>
</template>

二、 在 introduction-panel 下创建 introduction-wrapper 用来装载上面的两根绳子以及下面的面板;创建 introduction-trigger 充当右边的绳索开关。

<div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca3r8e6thj30ln0lqwgm.jpg"></img></div>

<template>
    <div class="introduction introduction-panel">
        <div class="introduction introduction-wrapper">

        </div>>
        <div class="introduction introduction-trigger">
            
        </div>
    </div>
</template>

三、把上面的两根绳子做出来,这两根绳子实际上是一个 div 的两边。

<template>
    <div class="introduction introduction-panel">
        <div class="introduction introduction-wrapper">
            <div class="introduction rope"></div>
        </div>
        <div class="introduction introduction-trigger">

        </div>
    </div>
</template>

IntroductionPanel.vue<style scoped> 节点下,给绳子添加样式。

/*牵引绳*/
.introduction.rope{
    width: 200px;
    height: 100px;
    border-left: 5px rgba(0,129,198,.8) solid;
    border-right: 5px rgba(0,129,198,.8) solid;
    box-shadow: 0px 0px 5px 0px rgba(13,148,225,.8), 0px 0px 5px 0px rgba(13,148,225,.8) inset;
}

四、创建面板 introduction-bar

<template>
    <div class="introduction introduction-panel">
        <div class="introduction introduction-wrapper">
            <div class="introduction rope"></div>
            <div class="introduction introduction-bar"></div>
        </div>
        <div class="introduction introduction-trigger">

        </div>
    </div>
</template>
/*内容面板*/
.introduction.introduction-bar{
    width: 500px;
    height: 600px;
    color: rgba(13,148,225,.9);/*内容颜色,蓝色加透明*/
    border-radius: 5px;/*圆角*/
    background-color: rgba(254, 253, 255, 0.9);/*背景色,白色加透明*/
    box-shadow: 0 7px 25px rgba(0, 0, 0, .3);/*阴影*/
}

五、此时左边部分已经完成

<div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca556ml2aj30jn0kp3yt.jpg"></img></div>

需要进行优化,给这两个元素设置 margin: 0 auto; 并给父元素设置 text-align: center 使得这两个元素保持居中。


/*左侧部分*/
.introduction.introduction-wrapper{
    width: 100%;
    text-align: center;
}

/*牵引绳*/
.introduction.rope{
    width: 200px;
    height: 100px;
    border-left: 5px rgba(0,129,198,.8) solid;
    border-right: 5px rgba(0,129,198,.8) solid;
    box-shadow: 0px 0px 5px 0px rgba(13,148,225,.8), 0px 0px 5px 0px rgba(13,148,225,.8) inset;
    margin: 0 auto;
}

/*内容面板*/
.introduction.introduction-bar{
    width: 500px;
    height: 600px;
    margin: 0 auto;
    color: rgba(13,148,225,.9);/*内容颜色,蓝色加透明*/
    border-radius: 5px;/*圆角*/
    background-color: rgba(254, 253, 255, 0.9);/*背景色,白色加透明*/
    box-shadow: 0 7px 25px rgba(0, 0, 0, .3);/*阴影*/
}

这时可以发现两个元素已经居中,但是上面的 div 露出了上下两条边,不好看,需要调整这两个元素的高度。

/*内容面板*/
.introduction.introduction-bar{
    width: 500px;
    height: 600px;
    margin: 0 auto;
    color: rgba(13,148,225,.9);/*内容颜色,蓝色加透明*/
    top: -5px;
    position: relative;
    border-radius: 5px;/*圆角*/
    background-color: rgba(254, 253, 255, 0.9);/*背景色,白色加透明*/
    box-shadow: 0 7px 25px rgba(0, 0, 0, .3);/*阴影*/
}

效果如下:

<div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca5e7vsfrj30os0krmxl.jpg"></img></div> <font color=red>绳子的上面暂不处理</font>

六、下面开始做右边的开关 introduction-trigger

<div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca5jescp9j3011063jr9.jpg"></img></div>

introduction-trigger 包括上面的绳子以及下面的绳结(忽略绳结上的箭头):

<template>
    <div class="introduction introduction-panel">
        <div class="introduction introduction-wrapper">
            <div class="introduction rope"></div>
            <div class="introduction introduction-bar"></div>
        </div>
        <div class="introduction introduction-trigger">
            <div class="introduction trigger-rope"></div>
            <div class="introduction trigger-point">
                
            </div>
        </div>
    </div>
</template>
/*开关整体*/
.introduction.introduction-trigger{
    left: 80%;
}

/*开关的绳子*/
.introduction.trigger-rope{
    position: relative;
    width: 5px;
    height: 300px;
    margin: 0 auto;
    background-color: rgba(0,129,198,.8);
    box-shadow: 0px 0px 5px 0px rgba(13,148,225,.8);
}

/*开关的绳结*/
.introduction.trigger-point{
    margin: 0 auto;
    position: relative;
    width: 25px;
    height: 60px;
    background-color: rgba(0,129,198,.9);
    box-shadow: 0px 0px 5px 0px rgba(13,148,225,.8);
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
}

<div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca5pgbbzwj30ml0c3t8w.jpg"></img></div> 如上,开关的位置不正确,需要修改下 ***introduction-wrapper*** 和 ***introduction-trigger*** 的样式 ```css /*开关整体*/ .introduction.introduction-trigger{ left: 80%; position: absolute; } /*左侧部分*/ .introduction.introduction-wrapper{ width: 100%; position: absolute; text-align: center; } ``` <div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca5z71ezbj30h20kt0t4.jpg"></img></div>

七、这时页面框架已经完成了,接下来就是给元素添加动效。 编辑 <script>

<script>
    export default {
        name: "IntroductionPanel",
        data() {
            return {
                introduction_active: false
            }
        },
        methods: {
            changeActiveStatus(){
                this.introduction_active = !this.introduction_active;
            }
        }
    }
</script>

给组件添加状态 introdution_active 和 改变状态的方法 changeActiveStatus(), 不需要用到 Vuex 。 然后给元素绑定动态 Class

<template>
    <div class="introduction introduction-panel">
        <div class="introduction introduction-wrapper" v-bind:class="{'active':introduction_active}">
            <div class="introduction rope"></div>
            <div class="introduction introduction-bar"></div>
        </div>
        <div class="introduction introduction-trigger" v-bind:class="{'active':introduction_active}">
            <div class="introduction trigger-rope"></div>
            <div class="introduction trigger-point" @click="changeActiveStatus()">

            </div>
        </div>
    </div>
</template><template>
    <div class="introduction introduction-panel">
        <div class="introduction introduction-wrapper" v-bind:class="{'active':introduction_active}">
            <div class="introduction rope"></div>
            <div class="introduction introduction-bar"></div>
        </div>
        <div class="introduction introduction-trigger" v-bind:class="{'active':introduction_active}">
            <div class="introduction trigger-rope"></div>
            <div class="introduction trigger-point" @click="changeActiveStatus()">

            </div>
        </div>
    </div>
</template>

接下来设置元素动效前后的状态,让CSS实现动画效果,这是补间动画,AE、Flash都可以玩一哈。

/*左侧部分*/
.introduction.introduction-wrapper{
    width: 100%;
    position: absolute;
    top: -1000px;/*左侧部分一开始应该在浏览器上方,在视野之外*/
    text-align: center;
}

/*左侧变换后的位置*/
.introduction.introduction-wrapper.active{
    top: -5px;/*-5是为了遮住绳子的div的上面部分*/
}

/*开关整体*/
.introduction.introduction-trigger{
    top: 0px;/*开关一开始的高度*/
    left: 80%;
    position: absolute;
}

/*开关整体变换后的高度*/
.introduction.introduction-trigger.active{
    top: -150px;/*往浏览器上方走,相当于缩短。也可以设置仅开关上方的绳子变短*/
}

效果如下:

<div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca6jiicffg30ks0kkn39.gif"></img></div>

  可以看出效果十分生硬,这时可以使用贝塞尔曲线或者关键帧进行优化,关键帧比较麻烦,所以这里用的是贝塞尔曲线。   神器——https://cubic-bezier.com/#.37,1.44,.57,.77 ,用这个网站可以直观地生成合适的贝塞尔曲线的函数。

<div align=center><img src="https://tva1.sinaimg.cn/large/0082zybpgy1gca74gc85vg30ts0kee81.gif"></img></div>

  如上是网站的界面,函数的参数分别为坐标系上红球的x轴坐标、y轴坐标和蓝绿球的x轴坐标和y轴坐标。坐标系横轴为时间,纵轴为动画的 progress, 直译过来是进程、进展的意思,映射到平移上就是指移动的点到原点的偏移量。   动图中两个方块是项目中用到的动画与线性动画的对比。动画后面具有弹跳的效果,在左上角坐标系上表现为后段往下的凹陷。动画的整体效果是元素离原点的距离越来越远,到后段反而离近一点点,然后又远离,直至到达终点。线的斜率反映运动的加速度。   获取到合适的贝塞尔函数后应用到项目中:

.introduction{
    transition: 0.3s cubic-bezier(.37,1.44,.57,.77);
}

八、最后给绳结添加箭头指示以及提示。

<template>
    <div class="introduction introduction-panel">
        <div class="introduction introduction-wrapper" v-bind:class="{'active':introduction_active}">
            <div class="introduction rope"></div>
            <div class="introduction introduction-bar"></div>
        </div>
        <div class="introduction introduction-trigger" v-bind:class="{'active':introduction_active}">
            <div class="introduction trigger-rope"></div>
            <div class="introduction trigger-point" @click="changeActiveStatus()" v-bind:class="{'active':introduction_active}">
                <div class="arrow arrow-down"></div>
                <div class="arrow arrow-down"></div>
                <div class="arrow arrow-down"></div>
            </div>
        </div>
    </div>
</template>
/*未激活的绳结需要设置底部padding,以抵消箭头旋转后产生的上下偏移*/
.introduction.trigger-point:not(.active){
    padding-bottom: 8px;
}

/*绳结下方的提示,未激活时显示*/
.introduction.trigger-point:not(.active):before{
    content: '点击查看帮助';
    color: rgba(13,148,225,.8);
    width: 100px;
    position: absolute;
    left: 50%;
    top:100%;
    transform: translateX(-50%);
}

/*绳结激活后,绳结上的箭头旋转*/
.introduction.trigger-point.active > .arrow-down{
    transform: rotate(225deg);
}

/*div的两条边邻边*/
.arrow {
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
    margin: 0 auto;
}

/*div旋转形成箭头*/
.arrow-down {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

九、成品 相关文件

原文出处:https://www.cnblogs.com/life-of-coding/p/VueJs-Introduction.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部