旋转动画悬停，但同时移动鼠标悬停->取消

Rotate animation hover but while moving mouse on hover -> cancel

本文关键字：悬停 取消 鼠标 动画 旋转 移动      更新时间：2023-09-26

我试图在我的网站上触发SVG中的旋转动画。它确实有效，但问题是当我移动鼠标时，当我悬停在元素上时，它会取消动画。

所以我包含了一个object svg元素:

<object type="image/svg+xml" data="branching4.svg" id="branching">
    Your browser does not support SVG
</object>

是一个很长的SVG文档但是这里有一个附加的样式表

#rectangle1, #rectangle2, #rectangle3{
    perspective: 1500px;
}
#rectangle1.flip .card, #rectangle2.flip .card, #rectangle3.flip .card {
    transform: rotateX(180deg);
}
#rectangle1 .card, #rectangle2 .card, #rectangle3 .card{
    transform-style:preserve-3d;
    transition:1s;
}
#rectangle1 .face, #rectangle2 .face, #rectangle3 .face{
    backface-visibility: hidden;
}
#rectangle1 #front1{
    transform: rotateX(0deg);
}
#rectangle1 #back1{
    transform: rotateX( 180deg );
}
#rectangle2 #front2{
    transform: rotateX(0deg);
}
#rectangle2 #back2{
    transform: rotateX( 180deg );
}
#rectangle3 #front3{
    transform: rotateX(0deg);
}
#rectangle3 #back3{
    transform: rotateX( 180deg );
}
#rectangle1.flipped, #rectangle2.flipped, #rectangle3.flipped {
    transform: rotateX( 180deg );
}

可以在jsfiddle

中看到svg结构。

最后是脚本:

window.onload=function() {
    var svgDoc = $("#branching")[0].contentDocument; // Get the document object for the SVG
    $(".st4", svgDoc).css("font-family", "robotolight,Helvetica Neue,Helvetica,Arial,sans-serif");
    $("#rectangle1", svgDoc).hover(function(){
        $(this, svgDoc).toggleClass("flip");
    });
    $("#rectangle2", svgDoc).hover(function(){
        $(this, svgDoc).toggleClass("flip");
    });
    $("#rectangle3", svgDoc).hover(function(){
        $(this, svgDoc).toggleClass("flip");
    });
};

我也尝试过CSS，它是相同的问题。

这是一个jsfield:

https://jsfiddle.net/7f7wjvvt/

问题1:

如何在元素上移动鼠标时具有流体旋转过渡?

第二问题:

我怎么能有一个Y旋转，停留在现场，而不是翻译到左边?

第三个问题:

为什么jsfiddle在firefox中很好地显示svg而不是在chrome中?此外，透视似乎不工作在chrome…为什么?

有什么想法吗?

不幸的是，我认为您遇到的许多问题仅仅是由于浏览器不支持svg元素上的(3D) css转换。

将卡片的<g>元素移动到普通<div>中自己的<svg>中，并将交互性应用于div元素将使事情变得容易得多。

.card {
  display: inline-block;
  transform-origin: center;
  perspective: 1000px;
  background: grey;
}
.card-inner {
  width: 100px;
  height: 200px;
  transition: transform .4s;
}
.card-inner:hover,
.card:hover > .card-inner {
  transform: rotateY(180deg);
}
<div class="card">
  <div class="card-inner" style="background: yellow">
    Add svg card here
  </div>
</div>
<div class="card">
  <div class="card-inner" style="background: blue">
    Add svg card here
  </div>
</div>
<div class="card">
  <div class="card-inner" style="background: green">
    Add svg card here
  </div>
</div>

在元素上移动鼠标时，如何使用流体旋转过渡?

一旦卡片旋转，它很容易松开悬停。悬停状态将应用于底层元素。如果你确定这是卡片的父元素，你可以使用下面的css规则:

.card-inner:hover,
.card:hover > .card-inner {
  transform: rotateY(180deg);
}

我怎么能有一个Y旋转，留在原地，而不是平移到左边?在小提琴上试试

你必须用transform-origin，就像你试过的那样。它只是不工作的svg元素…

transform-origin: center;

为什么jsfiddle在firefox中显示svg很好，而不是在chrome中?此外，透视似乎不工作在chrome…为什么?

就像我说的，它只是不支持…

你的第一个问题是什么

看起来问题在于当牌旋转时，它们会收缩。然后鼠标不再在卡片上，当卡片再次移动时，它会重新进入并且再次触发mouseenter事件。然后重复整个过程(只要鼠标在移动)。

解决方案是防止事件再次触发，直到动画完成。

有几种方法可以解决这个问题，但这里有一个解决方案:

// Flag to keep track of whether rectangle1 is flipping
var flipping1 = false;
$("#rectangle1").mouseenter(function() {
    // Only toggle the animation if we aren't already doing so
    if (!flipping1) {
        // Add the class to start the flip
        $(this).toggleClass("flip");
        // Set flag to mark that we are flipping
        flipping1 = true;
        // Then in just over a second, turn the flag off again
        setTimeout(function () {
            flipping1 = false;
        }, 1010);
    }
});

这里有一个小提琴，展示了这种技术在矩形1上的应用。

https://jsfiddle.net/7f7wjvvt/4/

我没有一个完整的答案，但对于你的第一个问题，我建议用。mouseenter触发器替换。hover，对于第二个问题，只是失去了视角。此外，我尝试前缀你的css，但无济于事，似乎有一些浏览器之间的兼容性问题在这里。

相关文章：