我正在使用以下代码。
通过单击div
id="popUpPane"
,div
及其子元素应出现并逐渐淡入。
再次单击div,它应逐渐淡出然后消失。
Firefox和Chrome(也是webkit)的行为方式也是如此,我知道Safari在较早的版本中也是如此。但是,当我在Safari和Safari Mobile上单击“popUpPane
”时,什么也没有发生。
这是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";
};
我希望有一个人可以帮助我。
感谢您的回应!
最佳答案
是的,移动Safari中存在一个错误,同时转换了opacity
+ visibility
。
您可以使用visibility
以外的方式修复它:在您的情况下,将width
和height
设置为0
会有所帮助。但是,您必须添加延迟,因此它们不会立即更改。
这是一个包含工作示例的介绍: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;
}