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

I'm trying to trigger a rotate animation in an SVG on my website. It definetly work but the problem is when i'm moving my mouse when i'm on hover the element it cancels the animation.

我试图在我的网站上以SVG触发一个旋转动画。它定义的很好，但问题是当我移动鼠标时，当我在鼠标悬停的时候它取消了动画。

So i include an object svg element:

因此我包含一个对象svg元素:

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

which is a long SVG document but here is stylesheet attached to it:

这是一个很长的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 );
}

You can see the svg structure in the jsfiddle

您可以在jsfiddle看到svg结构

And finally the script:

最后,脚本:

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");
    });

};

I also tried with CSS, it's the same problem.

我也尝试了CSS，同样的问题。

Here is a jsfiddle:

这里是一个jsfiddle:

https://jsfiddle.net/7f7wjvvt/

1st question:

问题1:

How can i have a fluid rotate transition when moving the mouse on the element ?

当移动鼠标到元件上时，如何实现流体旋转过渡?

2nd question:

问题2:

How can i have a Y rotation that stay on the spot and not translate to the left ? Try it in the fiddle

我怎么能让Y旋转保持在原地而不向左平移?在小提琴里试试

3rd question:

第三个问题是:

Why the jsfiddle display the svg well in firefox and not in chrome? Also, perspective doesn't seem to work in chrome ... WHY ?

为什么jsfiddle在firefox中显示svg，而不是在chrome中显示呢?而且，透视在chrome中似乎也行不通……为什么?

Any ideas ?

什么好主意吗?

3 个解决方案

#1

Unfortunately, I think many of the problems you're experiencing are simply the result of bad browser support for (3D) css transforms on svg elements.

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

Moving the cards <g> elements to their own <svg> inside an ordinary <div>, and applying the interactivity to the div element would make stuff a lot easier.

将卡片元素移动到普通的

中的它们自己的

.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>

How can i have a fluid rotate transition when moving the mouse on the element ?

当移动鼠标到元件上时，如何实现流体旋转过渡?

Once the card rotates, it easily looses hover. The hover state will be applied to underlying element though. If you make sure this is the card's parent, you can use this css rule for styling:

一旦卡片旋转，它很容易失去悬停。不过，鼠标悬停状态将应用于底层元素。如果您确定这是卡的父类，您可以使用此css规则进行样式化:

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

How can i have a Y rotation that stay on the spot and not translate to the left ? Try it in the fiddle

我怎么能让Y旋转保持在原地而不向左平移?在小提琴里试试

You'll have to use transform-origin, like you tried. It just doesn't work for svg elements...

你必须使用变形本，就像你尝试过的那样。它不适用于svg元素……

transform-origin: center;

Why the jsfiddle display the svg well in firefox and not in chrome? Also, perspective doesn't seem to work in chrome ... WHY ?

为什么jsfiddle在firefox中显示svg，而不是在chrome中显示呢?而且，透视在chrome中似乎也行不通……为什么?

Like I said, it just isn't supported properly...

就像我说的，它没有得到正确的支持……

#2

Re your first problem with the flip

这是你的第一个问题

It looks like the problem is that when the cards spin, they shrink. Then the mouse is no longer over the card and when the card moves around again it re-enters and the mouseenter event fires again. Then the whole process repeats (as long as the mouse is moving).

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

The solution is to prevent the event from firing again until the animation i complete.

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

There are several ways to fix this, but here is one solution:

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

// 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);
    }
});

Here's a fiddle showing this technique working on just rectangle1.

这是一个小提琴展示了这个技术在矩形上的应用。

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

#3

I don't have a complete answer but for your first question I'd suggest replacing the .hover with a .mouseenter trigger, and for the second one just lose the perspective. Also, I tried prefixing your css but to no avail, seems there's some compatibility issues between the browsers here.

我没有一个完整的答案，但是对于你的第一个问题，我建议你用一个.mouseenter触发器来代替.hover，而第二个问题则是失去了视角。另外，我试着预修你的css，但毫无效果，似乎浏览器之间存在兼容性问题。

#1