Question

我试图为我的侧导航栏设置动画，类似于this website side menu。

我对我正在使用的代码有点麻烦。请告诉我，如果我正在以正确的方式设置我的侧导航栏动画，类似于我提到的链接网站。如果它不是那样，那么指导我如何实现这种动画效果。

CSS，jQuery中的一个或两个都可以使用。
我的代码here。下面的Stack Snippet

.shap {
    height: 100vh;
    width: 50%;
    position: fixed;
    right: 0;
    background: red;
    -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 60% 100%);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 60% 100%);
    /*-webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 68% 100%);
clip-path: polygon(30% 0, 100% 0, 100% 100%, 68% 100%);*/
}
.side {
    -webkit-animation: width .5s;
    animation: width .5s;
}
@-webkit-keyframes width {
    0% {
        -webkit-clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
        clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    }
    50% {
        -webkit-clip-path: polygon(99% 0, 100% 0, 100% 100%, 60% 100%);
        clip-path: polygon(99% 0, 100% 0, 100% 100%, 60% 100%);
    }
    55% {
        -webkit-clip-path: polygon(90% 0, 100% 0, 100% 100%, 60% 100%);
        clip-path: polygon(90% 0, 100% 0, 100% 100%, 60% 100%);
    }
    60% {
        -webkit-clip-path: polygon(80% 0, 100% 0, 100% 100%, 60% 100%);
        clip-path: polygon(80% 0, 100% 0, 100% 100%, 60% 100%);
    }
    75% {
        -webkit-clip-path: polygon(70% 0, 100% 0, 100% 100%, 60% 100%);
        clip-path: polygon(70% 0, 100% 0, 100% 100%, 60% 100%);
    }
    85% {
        -webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%);
        clip-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%);
    }
    90% {
        -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 60% 100%);
        clip-path: polygon(50% 0, 100% 0, 100% 100%, 60% 100%);
    }
    100% {
        -webkit-clip-path: polygon(30% 0, 100% 0, 100% 100%, 60% 100%);
        clip-path: polygon(30% 0, 100% 0, 100% 100%, 60% 100%);
    }
}

<div class="shap side side1">
    <ul class="nav-ul">
        <li class="nav-li">Nav one</li>
        <li class="nav-li">Nav one one</li>
        <li class="nav-li">Nav one</li>
        <li class="nav-li">Nav one one</li>
        <li class="nav-li">Nav one</li>
        <li class="nav-li">Nav one</li>
    </ul>
</div>

Answer 1

问题

在您的具体问题中，我相信您已经为所有关键帧vendor prefixes required做了准备（您只使用了-webkit-前缀）。添加这些（以及未加前缀的版本）应该为所有浏览器解决您的问题。

<强>避免

如下：

＆＃13;

$('.open').click(function() {
  $('.menu').toggleClass("opened");
});

$('.menu').click(function() {
  $(this).toggleClass("opened");
});

＆＃13;

.open {
  height: 30px;
  width: 30px;
  background: red;
  position: absolute;
  top: 20px;
  left: 20px;
}
.menu {
  position: absolute;
  height: 100%;
  width: 400px;
  background: tomato;
  top: 0;
  left: -600px;
  transition: all 0.8s;
}
.opened {
  left: -200px;
  transform: skew(-10deg);
  text-align: right;
}
.items {
  transform: skew(10deg);
  padding: 20px;
  margin: 40px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="open"></div>
<div class="menu">
  <div class="items">
    click to hide
    <br/>click to hide
    <br/>click to hide
    <br/>click to hide
    <br/>
  </div>
</div>

＆＃13;

将使用 less markup 但实现相同可能对您有用。

修改历史记录

添加了对OP问题的额外解释

CSS垂直侧面菜单动画

1 个答案: