Interact.js 在 css 中拖动变换后：悬停不再起作用

Question

我刚刚发现 Interact.js 并且我设法让它工作，但是在拖动之后（启用惯性），我的 :hover 中的转换不再工作。 cursor: pointer 仍然有效。谁能想出解决办法？

css:

.bubble:hover {
      transform: scale(1.1);
      cursor: pointer;
}

js:

interact('.bubble').draggable({
            inertia: {
                resistance: 15,
                minSpeed: 100,
                endSpeed: 50
            },
            onmove: function(e) {
                var target = e.target,
                    // keep the dragged position in the data-x/data-y attributes
                    x = (parseFloat(target.getAttribute('data-x')) || 0) + e.dx,
                    y = (parseFloat(target.getAttribute('data-y')) || 0) + e.dy;

                // translate the element
                target.style.webkitTransform =
                    target.style.transform =
                        'translate(' + x + 'px, ' + y + 'px)';

                // update the posiion attributes
                target.setAttribute('data-x', x);
                target.setAttribute('data-y', y);
            }
        }).on('tap', function(e) {
            console.log('tapped');
            e.preventDefault();
        });

在此处检查 fiddle：https://jsfiddle.net/82utnzbx

提前致谢！

Answer 1

发生这种情况是因为您在 bubble 上应用了多个变换，即由于 interact.js，应用了一个 transform，它改变了对象的 x 和 y 坐标（tranlate 属性)，当您悬停时，另一个 transform 将应用于 scale 对象。

因此，javascript 中的 transform 会覆盖 css 中的 transform。

您需要做的是将 transform: translate() 和 transform: scale() 属性组合到 javascript 本身。

您可以通过使用 jquery.hover() 并通过以下代码将已存在的 transform 属性附加到静态 transform: scale() 来执行上述操作：

$(".bubble").hover(function() {
  document.getElementsByClassName("bubble")[0].style.transform += "scale(1.1)";
}, function() {
    // For transformation when bubble has moved already
  if (document.getElementsByClassName("bubble")[0].style.transform[0] != "s") {
    document.getElementsByClassName("bubble")[0].style.transform = document.getElementsByClassName("bubble")[0].style.transform.split(")")[0];
  } else {
    // For transformation when bubble has not moved
    document.getElementsByClassName("bubble")[0].style.transform = "";
  }
});

我已经帮你解决了，参考代码：

interact('.bubble').draggable({
  inertia: {
    resistance: 15,
    minSpeed: 100,
    endSpeed: 50
  },
  onmove: function(e) {
    var target = e.target,
      // keep the dragged position in the data-x/data-y attributes
      x = (parseFloat(target.getAttribute('data-x')) || 0) + e.dx,
      y = (parseFloat(target.getAttribute('data-y')) || 0) + e.dy;

    // translate the element
    target.style.webkitTransform =
      target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }
}).on('tap', function(e) {
  console.log('tapped');
  e.preventDefault();
});

$(".bubble").hover(function() {
  document.getElementsByClassName("bubble")[0].style.transform += "scale(1.1)";
}, function() {
  // For transformation when bubble has moved already
  if (document.getElementsByClassName("bubble")[0].style.transform[0] != "s") {
    document.getElementsByClassName("bubble")[0].style.transform = document.getElementsByClassName("bubble")[0].style.transform.split(")")[0];
  } else {
    // For transformation when bubble has not moved
    document.getElementsByClassName("bubble")[0].style.transform = "";
  }
});

* {
  background-color: #7dd3f4;
}

.bubble {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0 10px 30px 5px rgba(255, 255, 255, 1);
  -moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0 10px 30px 5px rgba(255, 255, 255, 1);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0 10px 30px 5px rgba(255, 255, 255, 1);
  width: 120px;
  height: 120px;
  transition: all .3s ease;
  margin-top: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}

.bubble:hover {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="container">
    <div class="bubble"></div>
  </div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/interact.js/1.2.6/interact.min.js"></script>
</body>

或者您可以查看更新后的 fiddle here。

Interact.js 在 css 中拖动变换后：悬停不再起作用

Interact.js after drag transform in css :hover doesn't work anymore

javascript

css

jquery

interact.js