Question

我不明白为什么幻灯片过渡效果无法在iOS Safari中使用。它可以在带有chrome，IE11和Mozilla的桌面（正常/响应）上运行。它也可以在移动设备上运行，但是当我使用iPhone进行测试时却不能。我认为这不是错误的宽度转换，而是不透明度（或可见性？），因为滑动效果和内部内容不可见，但是当我将拇指按在屏幕上一段时间显示图像时， iPhone识别出一些东西（它通过“保存这张图片”注意到了我）。

我尝试更改CSS和javascript：我尝试放置/删除-webkit-前缀，更改color属性，还尝试在CSS中放置“可见性：可见”或放置更多详细信息关于过渡的内容，例如以下示例：-webkit-transition：宽度为0.7s线性；

/* Open when someone clicks on the span element */
function openNav(divID) {
  document.getElementById(divID).style.width = "100%";

  var listItems = document.getElementsByClassName('myContent');

  for (var i = 0; i < listItems.length; i++) {
    setOpacity(listItems[i].getAttribute('id'), 1);
  }

}

/* Close when someone clicks on the "x" symbol inside the overlay */
function closeNav(divID) {
  document.getElementById(divID).style.width = "0%";

  var listItems = document.getElementsByClassName('myContent');

  for (var i = 0; i < listItems.length; i++) {
    setOpacity(listItems[i].getAttribute('id'), 0);;
  }
}

function actionNav(NavId, ContentId, ElemWidth, ElemOpacity) {
  document.getElementById(NavId).style.width = ElemWidth;
  setOpacity(ContentId, ElemOpacity);
}

function setOpacity(id, ElemOpacity) {
  if (detectIE() > 0) {
    document.getElementById(id).style.filter = "Alpha(Opacity=50)";
  } else {
    document.getElementById(id).style.opacity = ElemOpacity;
  }
}

function CloseSayHelloFromAbout() {
  actionNav("myNav2", "monContent2", "0", 0);
  actionNav("myNav3", "monContent3", "100%", 1);
}

  .overlay {
  height: 100%;
  opacity: 0.98;
  width: 0;
  position: fixed;
  z-index: 3;
  top: 0;
  overflow-x: hidden;
  background-color: black;
  -webkit-transition: 0.7s;
  transition: 0.7s;
  .myContent {
    position: relative;
    top: 8%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
    -webkit-transition: opacity 0.5s linear;
    transition: opacity 0.5s linear;
  }

<body>
  <div class="container no-gutters" style="width:auto; padding-top:20px; padding-left:30px">
    <div class="col">Hello World</div>
    <div class="col-sm-1 blinkButton" style="width:auto; z-index:2"><span onclick="openNav('myNav')">WORK</span></div>
    <div class="col-sm-1 blinkButton" style="width:auto; z-index:2"><span onclick="openNav('myNav2')">ABOUT</span></div>
  </div>

  <!-- The overlay -->
  <div class="overlay" style="width: auto; height: auto">
    <div id="myNav" class="overlay"><a href="javascript:void(0)" class="closebtn" onclick="closeNav('myNav')" style="font-size:25px">HOME</a>
      <div id="monContent" class="overlay-content myContent">
        <article> here all my content
        </article>
      </div>
</body>

非常感谢您的帮助！

如何使用javascript在野生动物园中有效设置过渡宽度？

0 个答案: