Drehen Sie den Mauszeiger über die Maus, während Sie die Maus bewegen -> Abbrechen

Question

Ich versuche, eine Rotationsanimation in einem SVG auf meiner Website auszulösen. Es funktioniert definitiv, aber das Problem ist, wenn ich meine Maus bewege, wenn ich das Element hebe, bricht es die Animation ab.

So umfassen i ein Objekt svg Element:

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

, die ein langes SVG-Dokument ist aber hier ist Sheet mit ihm verbunden:

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

Sie können die svg-Struktur in der jsfiddle sehen

Und schließlich das Skript:

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

}; 

Ich habe auch mit CSS versucht, es ist das gleiche Problem. Hier

ist ein jsfiddle:

https://jsfiddle.net/7f7wjvvt/

1. Frage:

Wie kann ich eine Flüssigkeit drehen Übergang haben, wenn die Maus auf das Element zu verschieben?

2. Frage:

Wie kann ich eine Y Drehung, die an Ort und Stelle bleiben und nicht nach links übersetzen? Versuchen Sie es in der Geige

3. Frage:

Warum die jsfiddle die svg Anzeige auch in Firefox und nicht in Chrom? Auch scheint Perspektive in Chrom nicht zu funktionieren ... WARUM?

Irgendwelche Ideen?

Answer 1

Leider denke ich, dass viele der Probleme, die Sie erleben, sind lediglich das Ergebnis schlechter Browser-Unterstützung für (3D) CSS-Transformationen auf SVG-Elemente.

Verschieben Sie die Karten <g> Elemente zu ihren eigenen <svg> in einem gewöhnlichen <div>, und die Interaktivität auf die div-Element anwenden würde Dinge viel einfacher machen.

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

Wie kann ich einen Fluid rotate Übergang, wenn auf das Element die Maus zu bewegen?

Sobald die Karte rotiert, verliert sie leicht den Schwebeflug. Der Hover-Status wird jedoch auf das zugrunde liegende Element angewendet werden. Wenn Sie sicherstellen, dass dies die Eltern-Karte ist, können Sie diese CSS-Regel für Styling verwenden:

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

Wie kann ich eine Y Drehung, die an Ort und Stelle bleiben und nicht nach links übersetzen? Versuchen Sie es in der Geige

Sie müssen transform-origin verwenden, wie Sie es versucht haben. Es funktioniert einfach nicht für svg Elemente ...

transform-origin: center; 

Warum die jsfiddle die svg gut in Firefox und nicht in Chrom angezeigt werden? Außerdem scheint die Perspektive in Chrome nicht zu funktionieren ... WARUM?

Wie ich schon sagte, es ist einfach nicht richtig unterstützt ...

Answer 2

Ich habe keine vollständige Antwort, aber für Ihre erste Frage würde ich vorschlagen, die .hover mit einem .mouseenter Trigger zu ersetzen, und für die zweite verlieren Sie nur die Perspektive. Auch habe ich versucht, Ihre CSS vorzuschlagen, aber ohne Erfolg, scheint es einige Kompatibilitätsprobleme zwischen den Browsern hier.

Answer 3

Re Ihr erstes Problem mit dem Flip

Es ist wie das Problem sieht, ist, dass, wenn die Karten spinnen, sie schrumpfen. Dann befindet sich die Maus nicht mehr über der Karte und wenn die Karte sich erneut bewegt, wird sie erneut eingegeben und das Mausereignis wird erneut ausgelöst. Dann wiederholt sich der gesamte Vorgang (solange sich die Maus bewegt).

Die Lösung besteht darin, zu verhindern, dass das Ereignis erneut ausgelöst wird, bis die Animation abgeschlossen ist.

Es gibt mehrere Möglichkeiten, dieses Problem zu beheben, aber hier ist eine Lösung:

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

Hier ist eine Geige mit dieser Technik zeigt nur rectangle1 arbeiten.

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