在css中拖动转换后进行交互.js：悬停不再起作用

我刚刚发现了 Interact.js 我设法让它工作，但在拖动(启用惯性(后，我的：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

提前感谢！

这是因为您在bubble上应用了多个转换，即由于interact.js，应用了一个transform来更改对象的x和y坐标(tranlate属性(，当您悬停时，将应用另一个transform来scale对象。

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

你要做的是在javascript本身中组合transform: translate()和transform: scale()属性。

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

$(".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>

或者您可以在此处查看更新的小提琴。

相关内容

最新更新

热门标签：