Question

我创建了这个演示：

http://cristiantraina.altervista.org/boxfall/

单击时，会创建一个红色的下降框。

问题是只使用css没有办法检测屏幕的大小，事实上在我的演示中我指定盒子必须下降1000px，无论屏幕的实际高度如何。

这是关键帧的代码：

.ForMember(dest => dest.phone, source => source.MapFrom(a => !string.IsNullOrWhiteSpace(a.Mobile) ? a.Mobile : "8099000078"));

我不能使用 bottom：0px; ，因为我不知道从哪里开始跌倒，我没有解决我的主要问题。

这是 FallBox.js 脚本：

@include keyframes("fall"){
   to{
      top: 1000px;
   }
 }

我知道我可以在父div中使用 overflow：hidden; ，但我不认为这是理想的解决方案。首先是因为用户可以拥有一个高度较高的屏幕，然后因为我希望盒子在遇到边缘时停止，因为边框是磨损的，不应该通过。

我在网络上找到的另一个解决方案是使用CSSOM API，但是mozilla developers都不确定这些解决方案的兼容性。

那么，如果动画遇到屏幕边缘怎么能停止，因为javascript无法注入属性？

谢谢。

Answer 1

如果您正在寻找仅限css的解决方案，则可以将css calc功能（http://caniuse.com/#feat=calc）与vh（http://caniuse.com/#search=vh）结合使用

＆＃13;

document.querySelector(".box").addEventListener("click", function() {
  this.classList.toggle("is-dropped");
})

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.box {
  position: absolute;
  top: 0;
  left: 200px;
  width: 100px;
  height: 100px;
  background: red;
  transition: top 2s;
}
.box.is-dropped {
  top: calc(100vh - 100px);
}

＆＃13;

<div class="box"></div>

＆＃13;

Answer 2

您可以使用translatey() CSS transform功能将每个div向上移动100%个height。这样，您只需要2个规则来更改top位置的值，而不必担心每种情况下都会height。

(function(d,M){
    var  div=d.createElement("div"),
         wait=0,size;
    d.body.addEventListener("click",function(){
      if(!wait){
        wait=1;
        div=div.cloneNode(1);
        div.classList.remove("go");// necessary so that newly created divs don't just get added to the bottom of the page
        size=M.max(M.floor(M.random()*200),50);
        div.style.height=div.style.width=size+"px";
        div.style.left=M.max(M.floor(M.random()*this.offsetWidth)-size,0)+"px";
        this.appendChild(div);
        setTimeout(function(){
          div.classList.add("go");// adding this class starts the animation.
          wait=0;
        },5);
       }
    },0);
})(document,Math);

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%}
div{
  background:#000;
  border:1px solid #fff;
  transition:top 2s linear;
  position:absolute;
  top:0;
  transform:translatey(-100%);
}
div.go{
  top:100%;
}

原始解决方案

由于在JavaScript中动态设置了框的高度，因此您的CSS不会知道每个框的高度，但这并不会阻止您使用CSS calc() function来设置{{ 1}}您希望为每个设置动画的位置，就像您目前设置其起始top位置一样。这是一个快速粗略的示例，如果您愿意，可以在评论中使用top替代解决方案。

calc()

var  div=document.createElement("div"),
     wait=0,size;
document.body.addEventListener("click",function(){
  if(!wait){
    wait=1;
    div=div.cloneNode(0);
    size=Math.max(Math.floor(Math.random()*200),50);
    div.style.height=div.style.width=size+"px";
    div.style.left=Math.max(Math.floor(Math.random()*this.offsetWidth)-size,0)+"px";
    div.style.top="-"+size+"px";
    this.appendChild(div);
    setTimeout(function(){
      div.style.top="calc(100% - "+size+"px)"; /* This is the important bit */
//    div.style.top=document.body.offsetHeight-size+"px"; /* Alternative solution, without using calc() */
      wait=0;
    },5);
   }
},0);

如何在遇到屏幕边缘时停止CSS动画？

2 个答案:

原始解决方案