एनीमेशन होवर घुमाएं लेकिन होवर पर माउस लेते समय ->

Question

रद्द करें मैं अपनी वेबसाइट पर एक एसवीजी में घुमावदार एनीमेशन ट्रिगर करने की कोशिश कर रहा हूं। यह निश्चित रूप से काम करता है लेकिन समस्या यह है कि जब मैं अपने माउस को ले जा रहा हूं, जब मैं तत्व पर होवर करता हूं तो यह एनीमेशन को रद्द कर देता है।

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

जो एक लंबे एसवीजी दस्तावेज़ है, लेकिन यहाँ स्टाइलशीट यह से जुड़ा हुआ है:

#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 संरचना देख सकते हैं

तो मैं एक वस्तु 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"); 
    }); 

}; 

मैंने सीएसएस के साथ भी कोशिश की, यह वही समस्या है।

यहाँ एक jsfiddle है:

https://jsfiddle.net/7f7wjvvt/

1 प्रश्न:

मैं एक तरल पदार्थ घुमाने संक्रमण जब तत्व पर माउस को ले जाकर कैसे हो सकती है?

2 प्रश्न:

कैसे मैं एक Y घुमाव उस स्थान पर रहते हैं और बाईं ओर का अनुवाद नहीं हो सकता है? बेला में यह प्रयास करें

3 प्रश्न:

क्यों jsfiddle फ़ायरफ़ॉक्स में और क्रोम में नहीं svg ठीक से दिखाई देगी? इसके अलावा, परिप्रेक्ष्य क्रोम में काम नहीं कर रहा है ... क्यों?

कोई विचार?

Answer 1

दुर्भाग्य से, मुझे लगता है कि समस्याओं आप अनुभव कर रहे के कई बस के लिए (3 डी) सीएसएस svg तत्वों पर बदल देती बुरा ब्राउज़र समर्थन का परिणाम है।

कार्ड अपने स्वयं के <svg> को <g> तत्वों चलती एक साधारण <div> अंदर, और 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>

मैं एक तरल पदार्थ घुमाने संक्रमण जब तत्व पर माउस को ले जाकर कैसे हो सकती है?

एक बार कार्ड घूमता है, यह आसानी से मंडराना खो देता है। होवर राज्य हालांकि अंतर्निहित तत्व पर लागू किया जाएगा।

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

कैसे मैं एक Y घुमाव उस स्थान पर रहते हैं और बाईं ओर का अनुवाद नहीं हो सकता है: क्या आप वाकई इस कार्ड की मूल है, तो आप स्टाइल के लिए इस सीएसएस नियम का उपयोग कर सकते हैं? इसे

पर प्रयास करें, आपको transform-origin का उपयोग करना होगा, जैसा आपने कोशिश की थी। यह सिर्फ svg तत्वों के लिए काम नहीं करता है ...

transform-origin: center; 

क्यों jsfiddle फ़ायरफ़ॉक्स में अच्छी तरह से svg प्रदर्शित करने और क्रोम में नहीं? इसके अलावा, परिप्रेक्ष्य क्रोम में काम नहीं कर रहा है ... क्यों?

जैसा कि मैंने कहा, यह सिर्फ ठीक से समर्थित नहीं है ...

Answer 2

मेरे पास पूरा जवाब नहीं है लेकिन आपके पहले प्रश्न के लिए मैं .moverenter ट्रिगर के साथ .hover को बदलने का सुझाव दूंगा, और दूसरे के लिए बस परिप्रेक्ष्य खो दें। इसके अलावा, मैंने आपके सीएसएस को उपसर्ग करने का प्रयास किया लेकिन इसका कोई फायदा नहीं हुआ, ऐसा लगता है कि यहां ब्राउज़र के बीच कुछ संगतता समस्याएं हैं।

Answer 3

पुन फ्लिप

यह समस्या की तरह दिखता है के साथ आपकी पहली समस्या यह है कि जब कार्ड स्पिन, वे हटना है। तब माउस कार्ड पर अब नहीं है और जब कार्ड फिर से घूमता है तो यह फिर से प्रवेश करता है और माउसेंटर घटना फिर से आग लगती है। फिर पूरी प्रक्रिया दोहराती है (जब तक माउस चल रहा है)।

समाधान एनीमेशन पूर्ण होने तक ईवेंट को फिर से फायरिंग से रोकने के लिए है।

इसे ठीक करने के कई तरीके हैं, लेकिन यहाँ एक समाधान है:

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

यहाँ इस तकनीक पर काम कर रहा सिर्फ rectangle1 दिखा एक बेला है।

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