инициируемые JavaScript переходы с непрозрачностью и видимостью в Safari - PullRequest
Новая
       17

инициируемые JavaScript переходы с непрозрачностью и видимостью в Safari

3 голосов
/ 07 декабря 2011

Я использую следующий код.При нажатии на div id="popUpPane" div и его дочерние элементы должны появляться и медленно исчезать.

При повторном нажатии на div он должен постепенно исчезать, а затем исчезать.

Firefox и Chrome (который также является webkit) ведут себя таким образом, и я знаю, что Safari действовал и в более ранней версии.Но точно знаю, в Safari и в Safari Mobile ничего не происходит, когда я нажимаю «popUpPane».

Это ошибка в Safari или я могу что-то изменить, чтобы вернуться к предполагаемому поведению?

Одно добавление: если я установлю -webkit-transition на -webkit-transition: opacity .5s ease-in-out;, он будет работать нормально, но переход появляется только при первом щелчке.После этого первого перехода нет переходов ... Если я удаляю opacity -часть в java-скрипте, 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";
};

Я надеюсь, что кто-то может мне помочь.

Спасибо за ваши ответы!

Ответы [ 2 ]

4 голосов
/ 19 января 2012

Да, в мобильном 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;
}
0 голосов
/ 19 октября 2012

Спасибо!

Поскольку эта ошибка теперь удалена из последних выпусков 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;
}
...