Question

我正在尝试实现我在Balaj Marius的codepen上找到的动画菜单图标。设计是here。

当我在我的项目中尝试它（或者甚至独立地在单独的文件中）时，它不起作用。出现图标，但javascript似乎没有运行。我认为这是一个明显的答案，但它目前正在打败我。关于如何启动和运行的任何想法？

我是这样的：

HTML：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Menu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/javascript" href="js/main.js">
    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
<body>
<div class="content">

        <h2>Scroll to see the magic.</h2>

        <div class="header__fake">

            <div class="icn__wrap">
                <i class="icn__hamburger"></i>
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="58px" height="58px" viewBox="0 0 16 16" preserveAspectRatio="none">
                    <circle cx="8" cy="8" r="6.215" transform="rotate(90 8 8)"></circle>
                </svg>
            </div>
            <i class="btm__border"></i>

        </div>


        <h1>Tah-da!<span>Now scroll back up.</span></h1>

    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</body>
</html>

的CSS：

body {
  background: #02021a url("https://raw.githubusercontent.com/balajmarius/hamburger-animation/master/assets/img/bg.jpg") no-repeat 0 0;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  color: #fff;
  font-family: Helvetica Neue, Helvetica, Open sans, Arial, sans-serif;
  font-weight:lighter;
  letter-spacing:1px;
}

.content {
  width: 320px;
  position: relative;
  margin: 0 auto;
}

.content h2 {
  margin: 35px 0 0;
}

.content h1 {
  text-align: center;
  margin: 1000px 0 200px;
}

.content h1 span {
  display: block;
  width: 100%;
  margin: 5px 0 0;
  opacity: .5;
}

.content .header__fake {
  position: fixed;
  top: 15px;
  left: 50%;
  margin-left: -160px;
  width: 320px;
}

.content .header__fake i {
  display: block;
}

.content .header__fake .btm__border {
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 6px;
  left: 0;
  right: 0;
  -webkit-transition: left 0.5s;
  transition: left 0.5s;
}

.content .header__fake .icn__wrap {
  cursor: pointer;
  float: right;
  width: 58px;
  position: relative;
  height: 58px;
  margin-right: -20px;
}

.content .header__fake .icn__wrap .icn__hamburger {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translateY(-6px);
  -ms-transform: translateX(-50%) translateY(-6px);
  transform: translateX(-50%) translateY(-6px);
  display: block;
  width: 18px;
  height: 1px;
  z-index: 999;
  background: #fff;
}

.content .header__fake .icn__wrap .icn__hamburger:after,
.content .header__fake .icn__wrap .icn__hamburger:before {
  content: "";
  float: left;
  display: block;
  width: 100%;
  height: 1px;
  background: #fff;
  margin: 5px 0 0;
}

.content .header__fake .icn__wrap .icn__hamburger:before {
  margin: 6px 0 0;
}

.content .header__fake .icn__wrap svg {
  z-index: 10;
}

.content .header__fake .icn__wrap svg circle {
  fill: none;
  stroke: #fff;
  stroke-width: .5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 39 39;
  stroke-dashoffset: -39;
  -webkit-transition: stroke-dashoffset 0.5s;
  transition: stroke-dashoffset 0.5s;
}

.content .header__fake.animated .btm__border {
  left: 100%;
  right: 4px;
}

.content .header__fake.animated svg circle {
  stroke-dashoffset: 0;
  -webkit-transition: stroke-dashoffset 0.5s;
  transition: stroke-dashoffset 0.5s;
}

.content .header__fake.fix .btm__border {
  -webkit-animation: fix 0.2s linear;
  animation: fix 0.2s linear;
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  right: 5px;
}

@-webkit-keyframes fix {
  from {
    right: 5px;
  }

  to {
    right: 0;
  }
}

@keyframes fix {
  from {
    right: 5px;
  }

  to {
    right: 0;
  }

}

JS：

$(document).ready(function(){
console.log("ready");
$header = $('.header__fake');

$(window).scroll(function() {


    var scroll = $(window).scrollTop();

    if (scroll > 20) {
        $header.addClass('animated').removeClass('fix');
    } else {
        $header.removeClass('animated').addClass('fix');
    }


});

});

SVG / CSS动画图标不起作用

0 个答案: