乐淘网侧边栏动画

原创

她与丈母娘皆失 2022-11-15 16:37:37 博主文章分类：JS ©著作权

文章标签 js css3 javascript 侧边栏动画 ide 文章分类 运维

©著作权归作者所有：来自51CTO博客作者她与丈母娘皆失的原创作品，请联系作者获取转载授权，否则将追究法律责任

在乐淘网买衣服时无意中发现了侧边栏的动画效果，没禁住诱惑尝试了一下，还挺难，不过做出来了。如有侵权请联系删除

乐淘网侧边栏动画_javascript

“乐淘网”官方线上地址，大额品牌超低折扣！

乐淘网侧边栏动画_侧边栏动画_02

太懒了没有加图片，但效果是一样的，这里用源生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版的普通侧边栏，可以二者结合做出你想要的延伸效果，代码灵活多变，动画能让你的页面变得更加饱满。

乐淘网侧边栏动画_javascript_03

代码如下：

<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>