jquery - 创建一个按钮，当它被按住时从中心开始填充，如果它被第二次按住则恢复到原来的颜色

我正在尝试创建一个参加事件的人员的快速 list 。这个 list 是一个简单的网页，可以在 iPad 上使用，使用 localStorage 来记住谁已经到了，谁还没有。

我想要做的是有一个容器(或下面示例中的单元格)，当它被持有时从中心向外改变它的背景颜色。一旦整个单元格成为新颜色，一旦用户停止将手指放在上面，它就会保持该颜色。通过这种方式，您可以让人们签到该事件，而短暂停顿应该可以防止意外点击。

如果我想从事件中删除某人(意外点击、人员离开等)，我想反向创建相同的效果，我的问题就出现了，再次从中心填充，但这次使用原始颜色。我发现我正在使用的 css 和 jquery 导致单元格由于某种原因立即跳到填充动画的末尾。

我也不擅长这种类型的过渡，可能以一种非常笨拙的方式进行。

到目前为止，这是我的代码，您应该能够将其复制并粘贴到 .html 文档中，它会在接受鼠标按下而不是手指按住的情况下运行:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>arrived demo</title>
  <link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <style>
  html, body { padding: 0; margin: 0; -webkit-user-select: none;}
  html, .ui-mobile, .ui-mobile body {
    height: 85px;
  }
  .ui-mobile, .ui-mobile .ui-page {
    min-height: 85px;
  }
  #nav {
    font-size: 200%;
    width:17.1875em;
    margin:17px auto 0 auto;
  }
  #nav a {
    color: #777;
    border: 2px solid #777;
    background-color: #ccc;
    padding: 0.2em 0.6em;
    text-decoration: none;
    float: left;
    margin-right: 0.3em;
  }
  #nav a:hover {
    color: #999;
    border-color: #999;
    background: #eee;
  }
  #nav a.selected,
  #nav a.selected:hover {
    color: #0a0;
    border-color: #0a0;
    background: #afa;
  }
  .box {
    width: 200px;
    height: 100%;
    background-color: #e1e1e1;
  }
  .box.arrived {
    background-color: green;
  }


/* Shutter Out Horizontal */
.hvr-shutter-out-horizontal, .hvr-shutter-out-horizontal2 {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  background: #e1e1e1;
  -webkit-transition-property: color;
  transition-property: color;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}
.hvr-shutter-out-horizontal:before, .hvr-shutter-out-horizontal2:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: green;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transform-origin: 50%;
  transform-origin: 50%;
  -webkit-transition-property: transform;
  transition-property: transform;
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.hvr-shutter-out-horizontal2{background: green;}
.hvr-shutter-out-horizontal2:before{background: #e1e1e1}

.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active, 
.hvr-shutter-out-horizontal2:hover, .hvr-shutter-out-horizontal2:focus, .hvr-shutter-out-horizontal2:active {
  color: white;
}
.hvr-shutter-out-horizontal.tap:before, .hvr-shutter-out-horizontal2.tap:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

td {
    padding: 20px;
    vertical-align: middle;
}

tr td:first-child {
    width: 500px;   
}
  </style>
</head>
<body>

<table>
    <tr>
        <td>Person's name</td>
        <td id="t1" class="box hvr-shutter-out-horizontal"></td>
    </tr>
    <tr>
        <td>Someone elses name</td>
        <td class="box hvr-shutter-out-horizontal"></td>
    </tr>

<script>
    $( document ).ready(function() {
        for(i=1;i<100;i++){
            if(localStorage.getItem('t'+i) == 'Y'){
                //$("#t"+i).addClass('arrived');
            }
        }
    });

    var tapTime = 0;
    $('.box').bind('vmousedown vmouseup', function (event) {
        if (event.type == 'vmousedown') {
            tapTime = new Date().getTime();
            if($(this).hasClass('arrived')){
                //if already marked as arrived
                $(this).addClass('hvr-shutter-out-horizontal2');
                $(this).addClass('tap');
            } else {
                //if not arrived
                $(this).addClass('tap');
            }
            //$(this).addClass('tap');
        } else {
            //event.type == 'vmouseup'
            //here you can check how long the `tap` was to determine what do do

            var duration = (new Date().getTime() - tapTime);
            if (duration > 1000) {
                //this is a tap-hold
                if($(this).hasClass('arrived')){
                    //if already marked as arrived

                } else {
                    $(this).removeClass('tap');
                    $(this).removeClass('hvr-shutter-out-horizontal');
                    $(this).addClass('arrived');
                }   
                localStorage.setItem('t1','Y');
            } else {
                //this is a tap
                $(this).removeClass('tap');
            }
        }
    });
</script>

</body>
</html>

编辑:它的行为方式的 .gif，鼠标周围的圆圈代表我的鼠标被单击并按住:http://gfycat.com/SecondhandSlipperyAngora

您可以看到初始动画效果很好，从中心开始用绿色填充背景，直到整个单元格都变成绿色。

但是，当我再次单击以从中心填充为灰色时，整个单元格立即变为灰色。再次单击会导致反向动画(从外边缘向内填充绿色)。这是导致问题的行为。

我终于得到了我想要的行为，即第三次交互时从中心填充的灰色。

最佳答案

您可以通过以下方式执行此操作:

<table>
      <tr>
          <td>Person's name</td>
          <td id="t1" class="box arrivalIndicator"></td>
      </tr>
      <tr>
          <td>Someone elses name</td>
          <td class="box arrivalIndicator"></td>
      </tr>
</table>

在 CSS 中创建一个 fillGreen 过渡和一个单独的 fillGray 过渡:

td {        
    vertical-align: middle;
}

tr td:first-child {
    width: 500px; 
    padding: 20px;
}    
.box {
  width: 200px;
  height: 100%;    
}


.arrivalIndicator{
  position:relative;
  background: #e1e1e1;
  display:inline-block;
  overflow:hidden;
  cursor:pointer;

}
.arrivalIndicator:before{
  content:'';
  position:absolute;
  top:0;left:50%;
  width:0;
  height:100%;
  background:green;
  z-index:-1;

  -webkit-transition: left 1.05s, width 1.05s, .6s -webkit-transform .2s; 
  -ms-transition: left 1.05s, width 1.05s, .6s -ms-transform .2s; 
  transition: left 1.05s, width 1.05s, .6s transform .2s;
}
.fillGreen:before{
  width:100%;
  left: 0%;
  background:green;
  z-index:10;
}
.fillGray:before{
  width:100%;
  left: 0%;
  background:#e1e1e1;
  z-index:10;
}

.arrived {
    background: green;
}

在代码中添加鼠标按下时适当的过渡类，然后始终删除鼠标弹起时的所有过渡类。如果长按应用或删除到达的类以保持背景颜色:

  $('.arrivalIndicator').on('vmousedown vmouseup', function (event) {
    if (event.type == 'vmousedown') {
        tapTime = new Date().getTime();
        if($(this).hasClass('arrived')){
            $(this).addClass('fillGray');
        } else {
            //if not arrived
            $(this).addClass('fillGreen');
        }
    } else {
        //event.type == 'vmouseup'
        //here you can check how long the `tap` was to determine what do do

        var duration = (new Date().getTime() - tapTime);
        if (duration > 1000) {
            //this is a tap-hold
            if($(this).hasClass('arrived')){
                //if already marked as arrived
                $(this).removeClass('arrived');
            } else {
                $(this).addClass('arrived');
            }   
            localStorage.setItem('t1','Y');
        } 
      //this is a tap
      $(this).removeClass('fillGray');
      $(this).removeClass('fillGreen');
    }        

  });

DEMO

关于jquery - 创建一个按钮，当它被按住时从中心开始填充，如果它被第二次按住则恢复到原来的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32863535/

jquery - 创建一个按钮，当它被按住时从中心开始填充，如果它被第二次按住则恢复到原来的颜色

上一篇：html - Bootstrap Carousel，选择高度

下一篇：css - 向 `echo` 编辑结果添加空间