乐淘网侧边栏动画
在乐淘网买衣服时无意中发现了侧边栏的动画效果，没禁住诱惑尝试了一下，还挺难，不过做出来了。如有侵权请联系删除
在这里插入图片描述
在这里插入图片描述
太懒了没有加图片，但效果是一样的，这里用源生JS写的，思路比较朴实无华： ·定义外部变量来判断按钮的点击状态； ·当按钮被点击时让侧边栏宽度还原或缩小； ·遍历每一个列表项，并调用动画； ·改变外部变量的值 代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 20px;
height: 300px;
background-color: pink;
overflow: hidden;
transition: all .5s;
}
p{
width: 80px;
height: 30px;
background-color: purple;
margin:10px;
transform: translateX(-100px);
}
@keyframes rig{
from{transform: translateX(-100px);}
to{transform:translateX(50px);}
}
@keyframes lef{
from{transform: translateX(56px);}
to{transform: translateX(-100px);}
}
</style>
</head>
<body>
<div id="rig">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
<button onclick="btn()">切换</button>
</body>
<script>
var ps = document.querySelectorAll("p");
console.log(ps);
let flag = false;
function btn(){
if(flag){
rig.style.width = "20px";
flag = false;
for(var j of ps){
j.style.animation = "lef .1 forwards";
}
}else{
rig.style.width = "170px";
var b = .7;
for(var a=0;a<ps.length;a++){
ps[a].style.animation = `rig .7 forwards ${b}s`;
b+=.2;
}
flag = true;
}
}
</script>
</html>在这里放一个vue版的普通侧边栏，可以二者结合做出你想要的延伸效果，代码灵活多变，动画能让你的页面变得更加饱满。
在这里插入图片描述
代码如下：
<template>
<div>
<div class="sidebar" :class="{cover:istrue}" @click="btnclick"></div>
<image class="fold" @click="btnclick" src="/static/images/icon_list.png"></image>
<div class="aside" :style="{transform:slide}">
<div class="head">Liberating Structures</div>
<div class="list" @click="navTo($pages.introduction)">
<span>Introduction</span>
<image class="rigEnt" src="/static/images/more.png"></image>
</div>
<div class="list" @click="navTo($pages)">
<span>Structures</span>
<image class="rigEnt" src="/static/images/more.png"></image>
</div>
<div class="list" @click="navTo($pages)">
<span>Strings</span>
<image class="rigEnt" src="/static/images/more.png"></image>
</div>
<div class="list" @click="navTo($pages)">
<span>About</span>
<image class="rigEnt" src="/static/images/more.png"></image>
</div>
</div>
</div>
</template>
<script>
import methodsMixin from '@/mixins/methods'
export default {
name:"sidebar",
mixins:[methodsMixin],
data(){
return{
istrue:false,
isWidth:'20rpx',
slide:'translateX(-74vw)'
}
},
methods:{
btnclick(){
if(!this.istrue){
this.istrue = true;
this.slide = 'translateX(0rpx)'
}else{
this.istrue = false;
this.slide = 'translateX(-74vw)'
}
},
}
}
</script>
<style lang="stylus" scoped>
.fold{
width:50rpx;
height:50rpx;
}
.aside{
position:fixed;
left:0;top:0;
z-index:5;
width:74vw;
height:100vh;
padding-top:40rpx;
transition:all .7s;
background-color:#FDFDFD;
.head{
padding:20rpx;
text-align:center;
border-bottom:1rpx #eee solid;
font-weight:600;
}
.list{
display:flex;
justify-content:space-between;
align-items:center;
padding:24rpx;
padding-left:34rpx;
.rigEnt{
width:24rpx;
height:24rpx;
}
}
}
button{
position:relative;
top:200rpx;
z-index:3;
}
// 特殊类
.cover{
position:fixed;
top:0;left:0;
width:100vw;
height:100vh;
background-color:#000;
opacity:.2;
}
</style>到底了！原创不易，转载请注明出处。
在这里插入图片描述
前端的学习不是一蹴而就，不积跬步无以至千里，不积小流无以成江海。持续不断的努力才能让你我有所收获，专业的知识还得到机构去学习，培训机构的设立有其存在的必然性，你钱花对了吗？
不辜负每一份真情，不嘲笑每一个正在努力的人，力所能及的对别人施以援手，每天都要强化自己，洗去铅华才能绽放光芒。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-12-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读