在带有动画的倾斜按钮上有效

Question

我正在尝试制作一个类似于下面的按钮，单击该按钮时，颜色会慢慢移至活动按钮。

我从here拍摄了图片

到目前为止，我已经完成了fiddle

<ul>
  <li class="selected"><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">OUR CENTRES</a></li>
  <li><a href="#">WHO, HOW, &amp; WHAT</a></li>
</ul>

css代码

  a,ul,li {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
  }

  * {
    font-family: Arial, Helvetica;
    font-size: 12px;
  }

  li {
    position: relative;
    line-height: 40px;
    float: left;
    margin-right: -1px;
    padding: 0 15px;
  }

  li {
    display: block;
    color: blue;
    text-align: center;
  }

  a:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    color: #fff;
    z-index: -1;
    transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
  }

  li:hover a:before {
    background: green;
  }

  li:hover a {
    color: #aaa;
  }

  li a.selected:before {
   content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    color: #fff;
    z-index: -1;
    transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
  }

  .selected a {
    color: #fff;
  }

  .selected {
    background-color: #10acdf;
  }

  ul {
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    display: -webkit-inline-box;
    border: 1px solid #10acdf;
    overflow: hidden;
    background-color: transparent;
    font-size: 14px;
    font-weight: bold;
  }

jquery

$('li').on('click', function() {
$('li').removeClass('selected');
$(this).addClass('selected');
});

悬停就像图像一样工作，但是当按钮处于活动状态时，按钮被覆盖为矩形，但不像我发布的图像（倾斜/倾斜）那样。如何使用动画将其移动到侧面它正在运行。我面临两个问题。

Answer 1

对于第一个问题，您只需将颜色添加到伪元素而不是元素：

$('li').on('click', function() {
  $('li').removeClass('selected');
  $(this).addClass('selected');
});

a,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

* {
  font-family: Arial, Helvetica;
  font-size: 12px;
}

li {
  position: relative;
  line-height: 40px;
  float: left;
  margin-right: -1px;
  padding: 0 15px;
}

li {
  display: block;
  color: blue;
  text-align: center;
}

a:before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #fff;
  color: #fff;
  z-index: -1;
  transform: skew(-15deg, 0);
  
}

li:hover a:before {
  background: green;
}

li:hover a {
  color: #aaa;
}

li.selected a:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #10acdf;
  color: #fff;
  z-index: -1;
  transform: skew(-15deg, 0);

}

.selected a {
  color: #fff;

}
ul {
  border-radius: 25px;
  display:inline-block;
  border: 1px solid #10acdf;
  overflow: hidden;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="selected"><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">OUR CENTRES</a></li>
  <li><a href="#">WHO, HOW, &amp; WHAT</a></li>


</ul>

对于动画部分，您只能根据单击的元素来考虑将一个伪元素应用于要移动的ul。

这是一个想法，其中我会根据所选li来调整伪元素的位置及其宽度。我还使用CSS变量来to control the pseudo element using jQuery：

$('ul').css('--w', $('li.selected').outerWidth());

$('li').on('click', function() {
  $('li').removeClass('selected');
  $(this).addClass('selected');
  $('ul').css('--l', $(this).position().left);
  $('ul').css('--w', $(this).outerWidth());
});

a,
ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

* {
  font-family: Arial, Helvetica;
  font-size: 12px;
}

li {
  line-height: 40px;
  float: left;
  padding: 0 15px;
  color: blue;
  text-align: center;
}

ul {
  position: relative;
  border-radius: 25px;
  display: inline-block;
  border: 1px solid #10acdf;
  overflow: hidden;
  background-color: transparent;
  font-size: 14px;
  font-weight: bold;
}

ul:before {
  content: '';
  position: absolute;
  top: 0;
  width: var(--w, 0px);
  bottom: 0;
  left: var(--l, 0);
  background: #10acdf;
  z-index: -1;
  transform: skew(-15deg, 0);
  cursor: pointer;
  transition: 1s all;
}

.selected a {
  color: #fff;
  transition: 1s all;
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<ul>
  <li class="selected"><a href="#">HOME</a></li>
  <li><a href="#">ABOUT</a></li>
  <li><a href="#">OUR CENTRES</a></li>
  <li><a href="#">WHO, HOW, &amp; WHAT</a></li>
</ul>