Question

我正在使用w3schools模式在一页上显示多个模式。但是我似乎无法让50％宽度的模态向后滑动到窗口之外。相反，当我关闭模态或关闭模态时，它们只是消失了。外部模式div是为了确保您也可以通过单击外部来关闭div。我的代码似乎没有签出。有解决此问题的解决方案吗？另外，使用过渡而不是动画会更好吗？提前致谢。 Codepen：https://codepen.io/anon/pen/xNVVBo

// Get the button that opens the modal
var btn = document.querySelectorAll(".modal-button");

// All page modals
var modals = document.querySelectorAll('.modal');

// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");

// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
  btn[i].onclick = function(e) {
    e.preventDefault();
    modal = document.querySelector(e.target.getAttribute("href"));
    modal.style.display = "block";
  }
}

// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
  spans[i].onclick = function() {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
    }
  }
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target.classList.contains('modal')) {
    for (var index in modals) {
      if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
    }
  }
}

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 91;
  /* Sit on top */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-animation-name: animate-close;
  -webkit-animation-duration: 0.6s;
  animation-name: animate-close;
  animation-duration: 0.6s;
}


/* Modal Content */

.modal-content {
  border-left: 2px solid black;
  position: fixed;
  background-color: #fefefe;
  right: 0;
  margin: auto;
  padding: 0;
  bottom: 0;
  top: 0;
  width: 50%;
  -webkit-animation-name: animate-open;
  -webkit-animation-duration: 0.6s;
  animation-name: animate-open;
  animation-duration: 0.6s;
}


/* Add Animation */

@-webkit-keyframes animate-open {
  from {
    right: -50%;
    opacity: 1
  }
  to {
    right: 0;
    opacity: 1
  }
}

@keyframes animate-open {
  from {
    right: -50%;
    opacity: 1
  }
  to {
    right: 0;
    opacity: 1
  }
}


/* Add Animation */

@-webkit-keyframes animate-close {
  from {
    right: 0;
    opacity: 1
  }
  to {
    right: -50%;
    opacity: 1
  }
}

@keyframes animate-close {
  from {
    right: 0;
    opacity: 1
  }
  to {
    right: -50%;
    opacity: 1
  }
}


/* The Close Button */

.close {
  color: #000;
  float: right;
  font-size: 28px;
  font-weight: bold;
  -webkit-animation-name: animate-close;
  -webkit-animation-duration: 0.6s;
  animation-name: animate-close;
  animation-duration: 0.6s;
}

<!-- Trigger/Open The Modal -->
<a class="modal-button" href="#myModal1">Open Modal</a>

<!-- The Modal -->
<div id="myModal1" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
    <p>CONTENT 1</p>

  </div>

</div>

<!-- Trigger/Open The Modal -->
<a class="modal-button" href="#myModal2">Open Modal</a>

<!-- The Modal -->
<div id="myModal2" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">×</span>
    <p>CONTENT 2</p>
  </div>

</div>

Answer 1

但是我似乎无法让50％宽度的模态向后滑动窗户的相反，当我在模态之外关闭时，它们就消失了或关闭它们。

这是因为无法为opacity: 0属性设置动画。在您的情况下（外部滑动元素），您可以简单地使用right: -100%和right。如果您希望元素在开始显示时部分显示在屏幕上-只需更改z-index: -1属性并添加负的z-index ex。 animation-name: name用于不活动的元素或类。

此外，最好使用过渡而不是动画

取决于大小写。属性更改时会应用转场（完全与您的情况相同，因此您不必为可以自动触发的简单作业创建动画）。另一方面，必须以某种方式应用动画（通常在el.styles.styleName = value或js中使用css在动画中）并独立运行（在应用后，它们只是运行而无需关心）。因此，在您的情况下，过渡就足够了，但是如果您使用动画，那就没错了。

此外，与使用import scrapy from scrapy_splash import SplashRequest class ScrapyOverflow1(scrapy.Spider): name = "overflow1" def start_requests(self): url = 'https://www.drivy.com/location-voiture/antwerpen/bmw-serie-1-477429?address=Gare+d%27Anvers-Central&city_display_name=&country_scope=BE&distance=200&end_date=2019-05-20&end_time=18%3A30&latitude=51.2162&longitude=4.4209&start_date=2019-05-20&start_time=06%3A00' yield SplashRequest(url=url, callback=self.parse, args={'wait': 5}) def parse(self, response): links = response.xpath('//a[@class="car_owner_section"]/@href').extract() print(links)逐行添加类相比，添加将包含所有活动样式的类是更好的做法，而不是仅从元素类列表中删除类。当您开始为元素添加更多状态时，它将更好地扩展并启用类链接。

具有基本功能的简化示例：https://codepen.io/anon/pen/Mdybgo

w3schools模态动画在结束时

1 个答案: