Question

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

我的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 lib的情况下创建菜单和动画？对不起我的英语不好。

Answer 1

以下是使用CSS perspective和transition而没有任何@keyframes的示例。

演示codepen

＆＃13;

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++;
})

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: