Safari中帶有不透明度和可見性的JavaScript觸發轉換

我正在使用以下代碼。通過點擊divid="popUpPane"，在div和它的孩子的應該會出現，慢慢地淡出。Safari中帶有不透明度和可見性的JavaScript觸發轉換

再次點擊股利，應該慢慢地淡出，然後消失。

Firefox和Chrome（也就是webkit）的行爲方式，我也知道Safari也在早期版本中做過。但是，當我點擊「popUpPane」時，在Safari和Safari Mobile上就知道沒有任何反應。

這是一個在Safari中的錯誤，或者有什麼我可以改變回到預期的行爲？

另外一個：如果我將-webkit-transition設置爲-webkit-transition: opacity .5s ease-in-out;它可以正常工作，但轉換隻出現在第一次點擊上。在第一個之後沒有任何轉換......如果我刪除了java腳本中的opacity -part，則opo-up可以工作，但沒有轉換。

我的網站上的所有其他轉換正在工作。但他們都只使用opacity而不是visibility。

這裏是我的代碼：

CSS：

#popUpPane { 
     white-space:normal; 
     position:fixed; 
     width:100%; 
     height:100%; 
     top:0; 
     left:0; 
     text-align:center; 
     vertical-align:middle; 
     visibility:hidden; 
     z-index:90; 
     } 
#greyOut { 
     position:fixed; 
     width:100%; 
     height:100%; 
     top:0; 
     left:0; 
     background-color:#000; 
     opacity:0; 
     } 
#popUpPicCanvas { 
     position:relative; 
     top:50%; 
     margin-top:-325px; 
     display:inline; 
     opacity:0; 
     z-index:100; 
     } 
.fade { 
     -webkit-transition: all .5s ease-in-out; 
     -moz-transition: all .5s ease-in-out; 
     -o-transition: all .5s ease-in-out; 
     transition: all .5s ease-in-out; 
     }

HTML：

<div id="popUpPane" onClick="noPopUp()"> 
    <div id="greyOut" class="fade"> </div> 
    <canvas id="popUpPicCanvas" width="1000" height="650" title="Bastian Beuttel"  class="fade"></canvas> 
    </div>

的Javascript：

var popUpPane = document.getElementById("popUpPane"), 
greyOut = document.getElementById("greyOut"), 
popUpPicCanvas = document.getElementById("popUpPicCanvas"), 
popCanvasContext = popUpPicCanvas.getContext("2d"); 


var doPopUp = function(source,x,y){ 
     var popUpPic = document.getElementById("pic"+source); 
     popCanvasContext.canvas.width = x; 
     popCanvasContext.canvas.height = y; 
     popCanvasContext.drawImage(popUpPic, 0, 0,x,y); 
     popUpPane.style.visibility = "visible"; 
     greyOut.style.opacity = "0.7"; 
     popUpPicCanvas.style.opacity = "1"; 
}; 
var noPopUp = function(){ 
     greyOut.style.opacity = "0"; 
     popUpPicCanvas.style.opacity = "0"; 
     popUpPane.style.visibility = "hidden"; 
};

我希望有人能幫助我。

感謝您的迴應！

來源

2011-12-07 basbebe

是的，移動Safari中有一個錯誤，同時轉換爲opacity + visibility。

可以使用除了visibility東西修復它：你的情況設置width和height到0會有所幫助。但是，您必須添加延遲，所以它們不會立即改變。

這裏是工作示例dabblet：http://dabblet.com/gist/1642110

/** 
* Delayed alternative for visibility 
*/ 

a { 
display: inline-block; 
background: #888; 
color:#FFF; 
padding: 1em; 
} 

div { 
width: 100px; 
height: 100px; 
background: lime; 
transition: opacity 1s; 
} 

a:hover+div { 
width: 0; 
height: 0; 
opacity: 0; 
transition: width 0s 1s, height 0s 1s, opacity 1s; 
}

來源

2012-01-19 19:48:46 kizu

謝謝！

由於此bug已從Webkit的最新版本中刪除，因此safari和chrome的問題已消失。我開始有問題，因爲我的div的位置也過渡了，所以我這樣寫：

.dofade { 
-webkit-transition: visibility .5s ease-in-out, opacity .5s ease-in-out; 
-moz-transition: visibility .5s ease-in-out, opacity .5s ease-in-out; 
-o-transition: visibility .5s ease-in-out, opacity .5s ease-in-out; 
transition: visibility .5s ease-in-out, opacity .5s ease-in-out; 
}

來源

2012-10-19 14:33:14 basbebe

Safari中帶有不透明度和可見性的JavaScript觸發轉換

回答

相關問題