Question

我刚刚发现Interact.js并且我设法让它工作，但是在拖动（启用惯性）之后，my：hover中的变换不再起作用。光标：指针仍然有效。谁能想到解决方案？

的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();
        });

在此处查看小提琴：https://jsfiddle.net/82utnzbx

提前致谢！

Answer 1

这种情况正在发生，因为您在bubble上应用了多次转换，即由于interact.js，应用了一个transform，这会更改对象的x和y坐标（{{1}当你悬停时，另一个tranlate被应用于transform对象。

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

您需要做的是将javascript本身中的transform: translate()和transform: scale()属性结合起来。

您可以使用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。

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

1 个答案: