1.效果预览:
效果图
2. 已实现功能:
- 点击顶部工具栏,打开侧栏
- 点击关闭按钮,关闭侧栏
- 点击顶部不同工具栏,切换侧栏内容
- 箭头指向点击位置
- 侧栏入场和出场动画
3. 功能分析
3.1 遮罩效果
将div的背景设置成黑色,透明度0.5,并设置z-index使其可以盖在主体页面之上
.cover {
position: fixed;
left: 0;
top: 50px;
width: 100%;
height: 100%;
background: #000000;
opacity: 0.5;
z-index: 500;
}
3.2 箭头实现
- 通过css画一个白色背景到三角形
- 通过 :style="{right:position} 控制right的位置实现其移动
- 通过调用"openSlider('message','130px')" 传递合适的值
<div class="pointer">
<div ref="triangle" class="triangle" :style="{right:position}" />
</div>
<style lang="scss" scoped>
.pointer {
height: 14px;
width: 100%;
background: transparent;
position: relative;
}
.triangle{
width: 0;
height: 0;
border: 7px solid transparent;
border-bottom-color: #fff ;
position: absolute;
top: 0;
}
</style>
3.3 动画实现
- 通过 <transition> 标签将需要进行动画的元素进行包裹, vue会添加如下到class
- v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
- v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
- v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
- v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
- v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
- v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
name属性定义了需要调用动画到前置,如我这里设置了name = "my",那么相应的自定义动画将前缀v改成my
@keyframes lightSpeedIn {
from {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
.my-enter-active {
transform-origin: left center;
animation: lightSpeedIn 0.4s;
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
}
.my-leave-active {
transform-origin: left center;
animation: lightSpeedOut 0.4s;
}
3.4 侧栏内容切换
通过v-show控制当前显示的组件
<todo v-show="openIndex === 'todo'" />
<message v-show="openIndex === 'message'" />
4.代码展示
rightslide.vue
<template>
<div>
<div v-show="openIndex" class="cover" />
<transition name="my">
<div v-show="openIndex" class="slider-container">
<div class="pointer">
<div ref="triangle" class="triangle" :style="{right:position}" />
</div>
<div class="slider-content">
<div>
<span @click="closeSlide">X</span>
</div>
<todo v-show="openIndex === 'todo'" />
<message v-show="openIndex === 'message'" />
</div>
</div>
</transition>
</div>
</template>
<script>
import Todo from '@/views/todo'
import Message from '@/views/message'
export default {
components: {
Todo,
Message
},
data() {
return {
show: true
}
},
computed: {
openIndex() {
return this.$store.state.rightSlider.openIndex
},
position() {
return this.$store.state.rightSlider.trianglePosition
}
},
methods: {
closeSlide() {
this.$store.dispatch('closeSlide')
},
handleClick: function() {
this.show = !this.show
}
}
}
</script>
<style lang="scss" scoped>
.cover {
position: fixed;
left: 0;
top: 50px;
width: 100%;
height: 100%;
background: #000000;
opacity: 0.5;
z-index: 500;
}
.slider-container {
width: 506px;
height: 100%;
top: 36px;
right: 0px;
position: fixed;
z-index: 1000;
}
.slider-content {
background: #fff;
height: 100%;
}
.pointer {
height: 14px;
width: 100%;
background: transparent;
position: relative;
}
.triangle{
width: 0;
height: 0;
border: 7px solid transparent;
border-bottom-color: #fff ;
position: absolute;
top: 0;
}
@keyframes lightSpeedIn {
from {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
to {
transform: none;
opacity: 1;
}
}
.my-enter-active {
transform-origin: left center;
animation: lightSpeedIn 0.4s;
}
@keyframes lightSpeedOut {
from {
opacity: 1;
}
to {
transform: translate3d(100%, 0, 0);
opacity: 0;
}
}
.my-leave-active {
transform-origin: left center;
animation: lightSpeedOut 0.4s;
}
</style>
vuex
const state = {
openIndex: '', // 标识侧栏显示的组件
trianglePosition: '' // 侧栏指向按钮距离右边到距离
}
const mutations = {
changeIndex(state, { index, position }) {
state.openIndex = index
state.trianglePosition = position
},
closeSlide(state) {
state.openIndex = ''
},
setPosition(state, position) {
state.trianglePosition = position
}
}
const actions = {
changeIndex({ commit }, { index, position }) {
commit('changeIndex', { index, position })
},
closeSlide({ commit }) {
commit('closeSlide')
},
setPosition({ commit }, { position }) {
commit('setPosition', position)
}
}
export default {
state,
mutations,
actions
}
调用:
<template>
<div>
<span @click="openSlider('message','130px')">消息中心</span>
<span @click="openSlider('todo','210px')">待办事项</span>
</div>
</template>
<script>
methods: {
openSlider(value, position) {
this.$store.dispatch('changeIndex', { index: value, position: position })
}
}
</script>
