Safari 中具有不透明度和可见性的 javascript 触发转换答案

【问题标题】：javascript-triggered transitions with opacity and visibility in SafariSafari 中具有不透明度和可见性的 javascript 触发转换
【发布时间】：2012-01-15 05:15:41
【问题描述】：

我正在使用以下代码。通过点击divid="popUpPane"，div 和它的孩子应该会出现并慢慢淡入。

再次点击 div，它应该会慢慢淡出然后消失。

Firefox 和 Chrome（也是 webkit）的行为方式是这样的，我知道 Safari 在早期版本中也是如此。但是在 Safari 和 Safari Mobile 上，当我点击“popUpPane”时，什么都没有发生。

这是 Safari 中的错误，还是我可以更改某些内容以恢复预期的行为？

一个补充：如果我将-webkit-transition 设置为-webkit-transition: opacity .5s ease-in-out; 它工作正常，但过渡只出现在第一次点击。在第一个之后没有过渡...如果我删除 java-script 中的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";
};

我希望有人可以帮助我。

感谢您的回复！

【问题讨论】：

标签： javascript css safari visibility css-transitions

【解决方案1】：

是的，移动版 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;
}

【讨论】：

【解决方案2】：

谢谢！

由于此错误现已从最新版本的 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;
}

【讨论】：