Question

这是我的jsfiddle：https://jsfiddle.net/n1ssf5up/5/

我从此链接获取了源代码：http://codepen.io/MrBambule/pen/jIseg

我需要更改获取小尺寸按钮的代码。

当我增加字体大小时，它的工作正常，为列表的0.7em to 1.7em。

的CSS：

.button {
  position: relative;
  width: 50px;
  height: 50px;
  border: 1px solid;
  border-radius: 50%;
  background: #2E3F47;
  z-index: 10;
}

.line {
  background: #ccc;
  width: 15px;
  height: 5px;
  margin: 2px auto;
}

.line__first {
  margin-top: 15px;
}

.menu {
  z-index: 1;
  float: left;
  width: 100%;
}

/* for the list to be horizontaly centered */
.table {
  display: table;
  margin: 0 auto;
}

.menu__list {

  width: 100%;
  margin-left:-110px;
    margin-top:-10px;
}

/* Animation keyframes for the drop down */
@keyframes drop {
  from {
    top: 0px;
  }
  70% {
    top: 85px;
    animation-timing-function: ease-in;
  }
  to {
    top: 70px;
    animation-timing-function: ease-out;
  }
}
@-webkit-keyframes drop {
  from {
    top: 0px;
  }
  70% {
    top: 85px;
    -webkit-animation-timing-function: ease-in;
  }
  to {
    top: 70px;
    -webkit-animation-timing-function: ease-out;
  }
}

li {
  position: relative;
  list-style: none;
  padding-bottom: 0px;
  top: 0px;
}

li a {
  text-decoration: none;
  color: grey;
  text-align: center;
  font-size: 0.7em;
  font-family: 'Open Sans', sans-serif;
}

.menu__list__item {
  opacity: 0;    
}

/*Animation classes to add to list-items that should be animated*/
.list--animation, .list--animation--delay1, .list--animation--delay2 {
  animation: drop 0.9s;
  -webkit-animation: drop 0.9s;
  animation-fill-mode: forwards;
  opacity: 1;
  -webkit-animation-fill-mode: forwards;
  opacity: 1;
}

.list--animation--delay1 {
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
}

.list--animation--delay2 {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
}

我需要相同的动画和小尺寸按钮。

我可能知道怎么做吗？提前谢谢。

Answer 1

尝试使用它：

.line { background: #ccc;width: 30%;height: 16%;margin: 10% auto;}     line__first {  margin-top: 15%;}

Answer 2

看看这个

demo

你必须在jQuery代码中添加带延迟的类..

  $('.item1').addClass('list--animation');
      $('.item2').delay(1000).queue(function(){
        $(this).addClass('list--animation--delay1').clearQueue();
    });
       $('.item3').delay(2000).queue(function(){
        $(this).addClass('list--animation--delay2').clearQueue();
    });

改变CSS

.list--animation--delay1 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

.list--animation--delay2 {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}

单击菜单中的按钮时，动画无法正常工作

2 个答案: