jQuery和CSS3带弹性效果的创意下拉框特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款非常有创意的jQuery和CSS3带弹性效果的下拉框特效。这个下拉框使用嵌套的div来制作，它可以像下拉框一样展开，并且采用扁平化的设计风格，在用户选择某一个列表项后还有一些很酷的弹性效果。

制作方法

HTML结构

该下拉框特效的HTML结构使用嵌套的<div>结构，每一个div.option是下拉框中的一个选项。

<div class="drop">
  <div class="option active placeholder" data-value="placeholder">
    Choose wisely
  </div>
  <div class="option" data-value="wow">
    Wow!
  </div>
  ......
</div>

.active代表当前用户选择的下拉列表项。.placeholder是文字占位。

CSS样式

在CSS样式中，包裹元素.drop将width属性作为平滑过渡的属性，并使用will-change属性来通知浏览器预先准备优化width属性。

.drop {
  width: 20em;
  margin: 5em auto;
  font-family: pfs-bold;
  color: #86919a;
  text-transform: uppercase;
  position: relative;
  -webkit-transition: width 0.5s;
          transition: width 0.5s;
  will-change: width;
}

所有的下拉列表项分别使用nth-child选择器来一一选择，并为它们设置平滑过渡的持续时间和延迟时间，同时也设置了transform属性的过渡动画的持续时间和延迟时间。

.drop.opacity .option:nth-child(0) {
  -webkit-transition: opacity 0.5s 0s, -webkit-transform 0.5s 0s;
          transition: opacity 0.5s 0s, transform 0.5s 0s;
}
.drop.opacity .option:nth-child(1) {
  -webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s;
          transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;
}
.drop.opacity .option:nth-child(2) {
  -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
          transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.drop.opacity .option:nth-child(3) {
  -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s;
          transition: opacity 0.5s 0.3s, transform 0.5s 0.3s;
}
.drop.opacity .option:nth-child(4) {
  -webkit-transition: opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
          transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
}
.drop.opacity .option:nth-child(5) {
  -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
          transition: opacity 0.5s 0.5s, transform 0.5s 0.5s;
}
.drop.opacity .option:nth-child(6) {
  -webkit-transition: opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s;
          transition: opacity 0.5s 0.6s, transform 0.5s 0.6s;
}
.drop.opacity .option:nth-child(7) {
  -webkit-transition: opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s;
          transition: opacity 0.5s 0.7s, transform 0.5s 0.7s;
}
.drop.opacity .option:nth-child(8) {
  -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
          transition: opacity 0.5s 0.8s, transform 0.5s 0.8s;
}
.drop.opacity .option:nth-child(9) {
  -webkit-transition: opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s;
          transition: opacity 0.5s 0.9s, transform 0.5s 0.9s;
}

下拉框右边的小箭头使用.drop:after和.drop:before来制作，分别对应向下和相上的小箭头。

.drop:after, .drop:before {
  content: "";
  position: absolute;
  top: 1.5em;
  right: 1em;
  width: 0.75em;
  height: 0.75em;
  border: 0.2em solid #86919a;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transition: opacity 0.2s;
          transition: opacity 0.2s;
}
.drop:before {
  border-left: none;
  border-top: none;
  top: 1.2em;
}
.drop:after {
  border-right: none;
  border-bottom: none;
  opacity: 0;
}

JAVASCRIPT

下拉框的弹性效果是使用js来完成的，使用的是triggerAnimation()函数。

function triggerAnimation() {
    var finalWidth = $('.drop').hasClass('visible') ? 22 : 20;
    $('.drop').css('width', '24em');
    setTimeout(function () {
        $('.drop').css('width', finalWidth + 'em');
    }, 400);
}

其它的jQuery代码用于在下拉框被点击的时候添加和移除相应的class。