如何移动流体使用CSS3变换打开/关闭屏幕的正确距离？ [英] How to move fluid divs the correct distance on/off screen using CSS3 transforms?

问题描述

我有一个流体容器，其中包含许多绝对定位的流体div。我想使用CSS3变换来移动这些打开和关闭页面。我遇到的问题是，当使用变换时，你使用确切的像素数量或元素本身的百分比。

所以你可以看到一个例子在 http://jsfiddle.net/K3uPY/ 上引用（这只是一个测试示例） / p>

这是使用1000％的转换将它们移出屏幕，这显然不是一件好事，如果显示器是巨大的，它不会工作，这意味着每个div结束离屏幕边缘不同的距离，所以动画可以最终花费相当不同的时间量，取决于它们的原始大小。

我想要什么根据视口宽度/高度（以及相关方向），将它们全部移出屏幕。

这可以很容易地通过动画顶部/左侧位置来完成，这在所有设备上显然不是最佳的（请参阅 http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/ ）

有没有反正要使用CSS3变换，甚至关键帧或我被困住的动画左/顶位置吗？

JSfiddle的CSS是： / p>

  html，body {height：100％; width：100％; padding：0; margin：0;} 
 #wrapper {width：100％;高度：100％; overflow：hidden;} 
 #container {width：50％;身高：50％; margin：auto; position：relative;} 
 #container div {
 background-color：red; 
 position：absolute; 
 height：25％; 
 -webkit-box-sizing：border-box; / * Safari / Chrome，其他WebKit * / 
 -moz-box-sizing：border-box; / * Firefox，other Gecko * / 
 box-sizing：border-box; / * Opera / IE 8+ * / 
 border：2px solid＃000000; 
 -webkit-transition-duration：600ms; 
 -moz-transition-duration：600ms; 
 -o-transition-duration：600ms; 
 transition-duration：600ms; 
 cursor：pointer; 
} 
 
 .zoomleft {
 -webkit-transform：translate（-1000％）; 
 -moz-transform：translate（-1000％）; 
 -ms-transform：translate（-1000％）; 
 -o-transform：translate（-1000％）; 
 transform：translate（-1000％）; 
} 
 .zoomright {
 -webkit-transform：translate（1000％）; 
 -moz-transform：translate（1000％）; 
 -ms-transform：translate（1000％）; 
 -o-transformation：translate（1000％）; 
 transform：translate（1000％）; 
} 
 .zoomtop {
 -webkit-transform：translate（0，-1000％）; 
 -moz-transform：translate（0，-1000％）; 
 -ms-transform：translate（0，-1000％）; 
 -o-transform：translate（0，-1000％）; 
 transform：translate（0，-1000％）; 
} 
 .zoombottom {
 -webkit-transform：translate（0，1000％）; 
 -moz-transform：translate（0，1000％）; 
 -ms-transform：translate（0，1000％）; 
 -o-transform：translate（0，1000％）; 
 transform：translate（0，1000％）; 
} 
 
 div.d1 {
 width：50％; 
 top：0; 
 left：0; 
} 
 div.d2 {
 width：50％; 
 top：0; 
 left：50％; 
} 
 div.d3 {
 width：25％; 
 top：25％; 
 left：0; 
} 
 div.d4 {
 width：25％; 
 top：25％; 
 left：25％; 
} 
 div.d5 {
 width：25％; 
 top：25％; 
 left：50％; 
} 
 div.d6 {
 width：25％; 
 top：25％; 
 left：75％; 
} 
 div.d7 {
 width：50％; 
 top：50％; 
 left：0; 
} 
 div.d8 {
 width：50％; 
 top：50％; 
 left：50％; 
} 
 div.d9 {
 width：50％; 
 top：75％; 
 left：0; 
} 
 div.d10 {
 width：50％; 
 top：75％; 
 left：50％; 
} 
  

感谢大家，

Dave

解决方案

幸运的是，由于根据视口流畅，所以你仍然可以在变换中使用百分比。请参阅我的小提琴 - http://jsfiddle.net/K3uPY/23/

我做的一件事是改变是确保#container在绝对的中心。我还大大简化了JS，并将所有的定位移动到CSS。

HTML

 < div id =wrapper> 
< button id =movebtn>移动< / button> 
< div id =container> 
< div class =box d1 active> 1< / div> 
< div class =box d2 active> 2< / div> 
< div class =box d3 active> 3< / div> 
< div class =box d4 active> 4< / div> 
< div class =box d5 active> 5< / div> 
< div class =box d6 active> 6< / div> 
< div class =box d7 active> 7< / div> 
< div class =box d8 active> 8< / div> 
< div class =box d9 active> 9< / div> 
< div class =box d10 active> 10< / div> 
< / div> 
< / div> 
  

JAVASCRIPT

  $（#movebtn）.on（'click'，function（）{
 $（'。box'）。toggleClass（'active'）; 
} 
  

CSS

  html，
 body {
 height：100％; 
 marg：0; 
 overflow：hidden; 
 width：100％; 
} 
 
 #wrapper {
 height：100％; 
 overflow：hidden; 
 width：100％; 
} 
 
 #container {
 width：50％; 
 height：50％; 
 margin：auto; 
 position：absolute; 
 top：50％; 
 left：50％; 
 transform：translate（-50％，-50％）; 
} 
 .box {
 background-color：red; 
 border：2px solid＃000000; 
 box-sizing：border-box; 
 cursor：pointer; 
 height：25％; 
 position：absolute; 
 transition-duration：600ms; 
} 
 .box.active {
 transform：none; 
} 
 
 
 .d1 {
 width：50％; 
 top：0; 
 left：0; 
 transform：translateY（-300％）; 
} 
 .d2 {
 width：50％; 
 top：0; 
 left：50％; 
 transform：translateY（-300％）; 
} 
 
 
 
 .d3 {
 width：25％; 
 top：25％; 
 left：0; 
 transform：translateX（-300％）; 
} 
 .d4 {
 width：25％; 
 top：25％; 
 left：25％; 
 transform：translateX（-400％）; 
} 
 .d5 {
 width：25％; 
 top：25％; 
 left：50％; 
 transform：translateX（400％）; 
} 
 .d6 {
 width：25％; 
 top：25％; 
 left：75％; 
 transform：translateX（300％）; 
} 
 
 
 
 .d7 {
 width：50％; 
 top：50％; 
 left：0; 
 transform：translateX（-200％）; 
} 
 .d8 {
 width：50％; 
 top：50％; 
 left：50％; 
 transform：translateX（200％）; 
} 
 
 
 .d9 {
 width：50％; 
 top：75％; 
 left：0; 
 transform：translateY（300％）; 
} 
 .d10 {
 width：50％; 
 top：75％; 
 left：50％; 
 transform：translateY（300％）; 
} 
  

I have a fluid container which contains a number of absolutely positioned fluid divs. I want to use CSS3 transforms to move these on and off the page. The problem i am having is that when using transforms you either use exact pixel amounts or percentages of the element itself.

So you can see an example of the sort of thing i'm referring to (this is just a test example) at http://jsfiddle.net/K3uPY/

This is using a transform of 1000% to move them offscreen which is obviously not a good thing to do as if the display is massive it won't work and it means each div ends up a different distance from off the screen edge so the animations can end up taking quite a different amount of time to complete depending on their original size.

What i want to do it move them all just offscreen based on the viewport width/height (and the related direction).

This can easily be done by animating the top/left positions but this is obviously not optimal on all devices (see http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)

Is there anyway to do this using CSS3 transforms or even keyframes or am i stuck having to animate the left/top positions?

The CSS from the JSfiddle is:

html, body {height:100%; width: 100%; padding:0; margin:0;}
#wrapper {width: 100%; height: 100%; overflow: hidden;}
#container {width:50%; height: 50%; margin: auto; position: relative;}
#container div {
background-color: red;
position: absolute;
height: 25%;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
border: 2px solid #000000;
-webkit-transition-duration: 600ms;
-moz-transition-duration: 600ms;
-o-transition-duration: 600ms;
    transition-duration: 600ms;
    cursor: pointer;
}

.zoomleft {
-webkit-transform:translate(-1000%);
-moz-transform:translate(-1000%);
-ms-transform:translate(-1000%);
-o-transform:translate(-1000%);
    transform:translate(-1000%);
}
.zoomright {
-webkit-transform:translate(1000%);
-moz-transform:translate(1000%);
-ms-transform:translate(1000%);
 -o-transform:translate(1000%);
    transform:translate(1000%);
}
.zoomtop {
-webkit-transform:translate(0, -1000%);
-moz-transform:translate(0, -1000%);
-ms-transform:translate(0, -1000%);
 -o-transform:translate(0, -1000%);
    transform:translate(0, -1000%);
}
.zoombottom {
-webkit-transform:translate(0, 1000%);
-moz-transform:translate(0, 1000%);
-ms-transform:translate(0, 1000%);
 -o-transform:translate(0, 1000%);
    transform:translate(0, 1000%);
}

div.d1 {
width: 50%;
top: 0;
left: 0;
}
div.d2 {
width: 50%;
top: 0;
left: 50%;
}
div.d3 {
width: 25%;
top: 25%;
left: 0;
}
div.d4 {
width: 25%;
top: 25%;
left: 25%;
}
div.d5 {
width: 25%;
top: 25%;
left: 50%;
}
div.d6 {
width: 25%;
top: 25%;
left: 75%;
}
div.d7 {
width: 50%;
top: 50%;
left: 0;
}
div.d8 {
width: 50%;
top: 50%;
left: 50%;
}
div.d9 {
width: 50%;
top: 75%;
left: 0;
}
div.d10 {
width: 50%;
top: 75%;
left: 50%;
}

Thanks everyone,

Dave

解决方案

Fortunately, since everything is fluid according to the viewport, you can still use percentages in the transform. See my Fiddle - http://jsfiddle.net/K3uPY/23/

One thing I did have to change was make sure #container was in the absolute center. I have also drastically simplified the JS and moved all of the positioning into the CSS.

HTML

<div id="wrapper">
    <button id="movebtn">Move</button>
    <div id="container">
        <div class="box d1 active">1</div>
        <div class="box d2 active">2</div>
        <div class="box d3 active">3</div>
        <div class="box d4 active">4</div>
        <div class="box d5 active">5</div>
        <div class="box d6 active">6</div>
        <div class="box d7 active">7</div>
        <div class="box d8 active">8</div>
        <div class="box d9 active">9</div>
        <div class="box d10 active">10</div>
    </div>
</div>

JAVASCRIPT

$( "#movebtn" ).on('click', function() {
    $('.box').toggleClass('active');
});

CSS

html,
body {
    height:100%;
    margin:0;
    overflow: hidden;
    width: 100%;
}

#wrapper {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

#container {
    width: 50%;
    height: 50%;
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.box {
  background-color: red;
  border: 2px solid #000000;
  box-sizing: border-box;
  cursor: pointer;
  height: 25%;
  position: absolute;
  transition-duration: 600ms;
}
.box.active {
  transform: none;
}


.d1 {
  width: 50%;
  top: 0;
  left: 0;
  transform: translateY(-300%);
}
.d2 {
  width: 50%;
  top: 0;
  left: 50%;
  transform: translateY(-300%);
}



.d3 {
    width: 25%;
    top: 25%;
    left: 0;
    transform: translateX(-300%);
}
.d4 {
    width: 25%;
    top: 25%;
    left: 25%;
    transform: translateX(-400%);
}
.d5 {
    width: 25%;
    top: 25%;
    left: 50%;
    transform: translateX(400%);
}
.d6 {
    width: 25%;
    top: 25%;
    left: 75%;
    transform: translateX(300%);
}



.d7 {
    width: 50%;
    top: 50%;
    left: 0;
    transform: translateX(-200%);
}
.d8 {
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translateX(200%);
}


.d9 {
    width: 50%;
    top: 75%;
    left: 0;
    transform: translateY(300%);
}
.d10 {
    width: 50%;
    top: 75%;
    left: 50%;
    transform: translateY(300%);
}

这篇关于如何移动流体使用CSS3变换打开/关闭屏幕的正确距离？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！