2016-06-28 174 views
5

我想在我的網站上的SVG觸發旋轉動畫。它定義的工作,但問題是當我移動我的鼠標時,我懸停元素它取消動畫。旋轉動畫懸停,但移動鼠標懸停 - >取消

所以我有一個對象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,這是同樣的問題。

這裏是一個的jsfiddle:

https://jsfiddle.net/7f7wjvvt/

1問題:

我怎麼能在元素上移動鼠標時,流體旋轉過渡?

第二個問題:

怎樣纔可以有一個Y軸旋轉是留在現場,並沒有轉化到左側?嘗試在撥弄

第三問題:

爲什麼的jsfiddle顯示SVG以及在Firefox,而不是在鉻? 此外,透視似乎不能在鉻...工作?爲什麼?

任何想法?

+0

的問題1.你可以嘗試添加一個標誌,定當動畫結束。你可以使用'transitionend'來聽一些CSS結束動畫:https://davidwalsh.name/css-animation-callback和https://developer.mozilla.org/en-US/docs/Web/Events/轉換終止 – GibboK

回答

3

不幸的是,我想很多人都遇到的問題,只是對(3D)CSS轉換的SVG元素糟糕的瀏覽器支持的結果。

在普通<div>內將卡片<g>移動到它們自己的<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顯示SVG以及在Firefox,而不是在鉻?此外,透視似乎並不適用於鉻...爲什麼?

就像我說的,它只是不正確支持...

+0

感謝隊友你得到了這個 –

0

我沒有一個完整的答案,但對於你的第一個問題,我建議用.mouseenter觸發更換.hover,而對於第二個剛剛失去了角度。 另外,我試着給你的CSS添加前綴,但無濟於事,似乎這裏的瀏覽器之間存在一些兼容性問題。

1

回覆您的鍵盤蓋

它看起來像這個問題第一個問題是,當卡旋轉,它們會收縮。然後鼠標移動到該卡,當卡移動再次圍繞它重新進入並再次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); 
    } 
}); 

這裏是展示這種技術工作只是rectangle1小提琴。

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