表单/表格

弹性效果的创意下拉框特效

创客主机


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

HTML结构

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

  1. <div class="drop">
  2.   <div class="option active placeholder" data-value="placeholder">
  3.     Choose wisely
  4.   </div>
  5.   <div class="option" data-value="wow">
  6.     Wow!
  7.   </div>
  8.   ......
  9. </div>

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

CSS样式

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

  1. .drop {
  2.   width: 20em;
  3.   margin: 5em auto;
  4.   font-family: pfs-bold;
  5.   color: #86919a;
  6.   text-transform: uppercase;
  7.   position: relative;
  8.   -webkit-transition: width 0.5s;
  9.           transition: width 0.5s;
  10.   will-change: width;
  11. }

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

  1. .drop.opacity .option:nth-child(0) {
  2.   -webkit-transition: opacity 0.5s 0s, -webkit-transform 0.5s 0s;
  3.           transition: opacity 0.5s 0s, transform 0.5s 0s;
  4. }
  5. .drop.opacity .option:nth-child(1) {
  6.   -webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s;
  7.           transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;
  8. }
  9. .drop.opacity .option:nth-child(2) {
  10.   -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
  11.           transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
  12. }
  13. .drop.opacity .option:nth-child(3) {
  14.   -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s;
  15.           transition: opacity 0.5s 0.3s, transform 0.5s 0.3s;
  16. }
  17. .drop.opacity .option:nth-child(4) {
  18.   -webkit-transition: opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
  19.           transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
  20. }
  21. .drop.opacity .option:nth-child(5) {
  22.   -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
  23.           transition: opacity 0.5s 0.5s, transform 0.5s 0.5s;
  24. }
  25. .drop.opacity .option:nth-child(6) {
  26.   -webkit-transition: opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s;
  27.           transition: opacity 0.5s 0.6s, transform 0.5s 0.6s;
  28. }
  29. .drop.opacity .option:nth-child(7) {
  30.   -webkit-transition: opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s;
  31.           transition: opacity 0.5s 0.7s, transform 0.5s 0.7s;
  32. }
  33. .drop.opacity .option:nth-child(8) {
  34.   -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
  35.           transition: opacity 0.5s 0.8s, transform 0.5s 0.8s;
  36. }
  37. .drop.opacity .option:nth-child(9) {
  38.   -webkit-transition: opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s;
  39.           transition: opacity 0.5s 0.9s, transform 0.5s 0.9s;
  40. }

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

  1. .drop:after, .drop:before {
  2.   content: "";
  3.   position: absolute;
  4.   top: 1.5em;
  5.   right: 1em;
  6.   width: 0.75em;
  7.   height: 0.75em;
  8.   border: 0.2em solid #86919a;
  9.   -webkit-transform: rotate(45deg);
  10.       -ms-transform: rotate(45deg);
  11.           transform: rotate(45deg);
  12.   -webkit-transform-origin: 50% 50%;
  13.       -ms-transform-origin: 50% 50%;
  14.           transform-origin: 50% 50%;
  15.   -webkit-transition: opacity 0.2s;
  16.           transition: opacity 0.2s;
  17. }
  18. .drop:before {
  19.   border-left: none;
  20.   border-top: none;
  21.   top: 1.2em;
  22. }
  23. .drop:after {
  24.   border-right: none;
  25.   border-bottom: none;
  26.   opacity: 0;
  27. }

JAVASCRIPT

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

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

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

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!