jquery - 我怎样才能拥有像 followbubble.com 这样的 CSS3 动画菜单

Question

在某些实践中，我尝试使用 CSS3 创建一个类似 followbubble.com 的菜单。它看起来有点像那样。但不准确。我认为他们使用 AngularJS 库来创建所有动画。但我对那个图书馆一无所知。

我的 HTML 标记:

<div id="sidebar">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#" class="m-active">Work</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

我的 CSS 代码:

@-webkit-keyframes openmenu {

  100% {
    -webkit-transform: perspective(500px);
            transform: perspective(500px);
  }
}

@keyframes openmenu {

  100% {
    -webkit-transform: perspective(500px);
            transform: perspective(500px);
  }
}

.openmenu {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: openmenu;
          animation-name: openmenu;

  -webkit-animation-duration: .6s !important;
          animation-duration: .6s !important;
    -webkit-transform-origin:0% 50%;
    -moz-transform-origin:0% 50%;
    -ms-transform-origin:0% 50%;
    -o-transform-origin:0% 50%;
    transform-origin:0% 50%;
    -webkit-transform:translate3d(120%, 0, 0) rotateY(90deg);   
    -moz-transform:translate3d(120%, 0, 0) rotateY(90deg);
    -ms-transform:translate3d(120%, 0, 0) rotateY(90deg);
    -o-transform:translate3d(120%, 0, 0) rotateY(90deg);
    transform:translate3d(120%, 0, 0) rotateY(90deg);
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d
}

@-webkit-keyframes closemenu {

  0% {
    -webkit-transform: perspective(500px);
            transform: perspective(500px);
  }
}

@keyframes closemenu {

  0% {
    -webkit-transform: perspective(500px);
            transform: perspective(500px);
  }
}

.closemenu {
  -webkit-backface-visibility: visible !important;
          backface-visibility: visible !important;
  -webkit-animation-name: closemenu;
          animation-name: closemenu;

  -webkit-animation-duration: .6s !important;
          animation-duration: .6s !important;
    -webkit-transform-origin:0% 50%;
    -moz-transform-origin:0% 50%;
    -ms-transform-origin:0% 50%;
    -o-transform-origin:0% 50%;
    transform-origin:0% 50%;
    -webkit-transform:translate3d(120%, 0, 0) rotateY(90deg);
    -moz-transform:translate3d(120%, 0, 0) rotateY(90deg);
    -ms-transform:translate3d(120%, 0, 0) rotateY(90deg);
    -o-transform:translate3d(120%, 0, 0) rotateY(90deg);
    transform:translate3d(120%, 0, 0) rotateY(90deg);
    -webkit-transform-style:preserve-3d;
    -moz-transform-style:preserve-3d;
    -ms-transform-style:preserve-3d;
    -o-transform-style:preserve-3d;
    transform-style:preserve-3d
}

并使用以下 jquery 代码，我将 css 用于动画和显示:

   $('#show-menu').click(function(){


            if( $('#sidebar').hasClass('animated openmenu') ) {

                $('#sidebar').removeClass('animated openmenu').addClass('animated closemenu');
            }
            else{
                if( $('#sidebar').hasClass('animated closemenu') ){                        
                    $('#sidebar').removeClass('animated closemenu');
                    }

                $('#sidebar').show().addClass('animated openmenu');
            }
        });

我想要一个与 followbubble.com 完全一样的菜单动画。我如何在没有 AngularJS 库的情况下创建菜单和动画？请原谅我的英语不好。

Answer 1

这是一个使用 CSS 的 perspective 和 transition 的例子，没有任何 @keyframes。

演示 codepen

var c = 0;
$('#hamburger').click(function() {
  if (c % 2 == 0) {
    $('#menu').css({
      'transform': 'rotateY(0deg)'
    });
    $('#main-container').css({'left': '-250px'});
  } else {
    $('#menu').css({
      'transform': 'rotateY(35deg)'
    });
    $('#main-container').css({'left': '0px'});
  }
  c++;
})

html, body {
  margin: 0;
  overflow: hidden;
  height: 102%;
  background: #222222;
}
#main-container {
  position: relative;
  width: 100%;
  height: 100%;
  left: 0;
  background: #222222;
  perspective: 510px;
  transition: all 1.2s;
}
#hamburger {
  font-size: 30px;
  color: #dddddd;
  float: right;
  padding: 30px;
  cursor: pointer;
}
#menu {
  margin: 0;
  height: 100%;
  width: 250px;
  background: #E2E2E2;
  list-style: none;
  padding: 0;
  transform: rotateY(35deg);
  position: absolute;
  right: -250px;
  transition: all 1s;
  transform-origin: 0 0;
}
li {
  width: 250px;
  height: 30px;
  line-height: 30px;
  padding: 10px 0 10px 0;
  text-align: center;
  color: #333333;
  border-bottom: 1px solid #666666;
  cursor: pointer;
}
#content {
  position: relative;
  color: #EEEEEE;
  transform: translateY(-50%);
  top: 50%;
  text-align: center;
  font-size: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main-container">
  <div id="hamburger">☰</div>
  <ul id="menu">
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
    <li>Menu Item</li>
  </ul>
  <div id="content">Content</div>
</div>