19

对于现在的一些项目，我在页面上有一些元素，我想将它们翻译到屏幕区域之外（让它们飞出文档）。在正确的代码中，这应该可以通过向相关元素添加一个类来实现，之后css将处理其余部分。问题在于，例如，如果

.block.hide{
    -webkit-transform:translateY(-10000px);
}

使用该元素首先会以不必要的高速飞出屏幕不必要的距离。纯粹从美学的角度来看，还有很多不足之处（从理论上讲，例如将来有一天会引入高度为 10000 像素的屏幕）。

（更新）不能使用百分比的问题是 100% 与元素本身有关，而不是与父元素/屏幕大小有关。并且将元素包含在全尺寸的父级中是可能的，但会造成点击事件的混乱。在几个答案之后，请允许我指出我在谈论翻译，而不是position:absolutecss3 转换（这一切都很好，但是一旦你得到足够的它们，它们就不再有趣了）。

你们能想到哪些美观的解决方案可以让元素在固定的时间内从屏幕中翻译出来？

示例代码可以在这个 jsfiddle 中找到，演示基本概念。 http://jsfiddle.net/ATcpw/

（有关更多信息，请参阅下面我自己的答案）

4

8 回答 8

11

如果你用容器包装 .block div：

<div class="container">
   <div class="block"></div>
</div>
<button>Click</button>

您可以展开，然后在单击事件后翻译容器本身

document.querySelector("button").addEventListener("click", function () {
   document.querySelector(".container").classList.add("hide");
});

用这种风格

.block {
    position:absolute;
    bottom:10px;
    right:10px;
    left:10px;
    height:100px;
    background:gray;
}

.container {
    -webkit-transition: -webkit-transform ease-in-out 1s;
    -webkit-transform-origin: top;
    -webkit-transition-delay: 0.1s; /* Needed to calculate the vertical area to shift with translateY */
}

.container.hide {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    /* background:#f00; /* Uncomment to see the affected area */ 
    -webkit-transform: translateY(-110%);
}

通过这种方式，可以应用正确的翻译百分比（略高于 100%，只是为了让它不碍事）并保持按钮可点击。

您可以在这里看到一个工作示例：http: //jsfiddle.net/MG7bK/

PS：我注意到只有transitionY属性需要过渡延迟，否则动画会失败，可能是因为它试图在获得实际高度值之前开始。如果你使用水平消失，它可以被省略，与 translateX。

于 2013-03-14T19:35:14.617 回答
10

我所做的是使用vh（视图高度）单位。它总是相对于屏幕大小，而不是元素本身：

/* moves the element one screen height down */
translateY(calc(100vh))

因此，如果您知道元素在屏幕中的位置（例如top:320px），则可以将其完全移出屏幕：

/* moves the element down exactly off the bottom of the screen */
translateY(calc(100vh - 320px))
于 2015-10-28T04:48:52.543 回答
7

我知道这不是您要问的，但是...

你会考虑在Greensock 的动画平台上使用 CSS 动画吗？它非常快（它声称它比 jQuery 快 20 倍），您可以在此处查看速度测试：http: //www.greensock.com/js/speed.html

我相信它会让你的代码更好，而不是试图破解 CSS 动画，你可以专注于更重要的东西。

我在这里创建了一个 JSFiddle：http: //jsfiddle.net/ATcpw/4/

CSS 和可能的 JS 看起来都更简单：

document.querySelector("button").addEventListener("click",function(){
    var toAnimate = document.querySelector(".block");
    TweenMax.to(toAnimate, 2, {y: -window.innerHeight});
});

CSS：

.block{
    position:absolute;
    bottom:10px;
    right:10px;
    left:10px;
    height:100px;
    background-image: url(http://lorempixel.com/800/100);
}
于 2013-03-12T17:41:27.157 回答
4

我最近构建了一个应用程序，该应用程序正是使用这种技术来滑动“面板”（或页面）和应用程序的选项卡进出视图。可以在此处看到选项卡机制的基本实现。

基本上（用于说明概念的伪代码，减去前缀等）：

.page {
    transform: translateY(100%);
}

.page.active {
    transform: translateY(0%);
}

我遇到的问题是 Android Webkit 特别不能正确计算百分比值。最后我不得不使用脚本来获取视口宽度并以像素为单位指定值，然后使用动态样式表解析库编写规则。

但最终，尽管只有这些特定于平台的小问题，这对我来说非常有效。

于 2013-03-12T14:46:57.180 回答
1

使用calc方法（http://jsfiddle.net/ATcpw/2/）：

.block{
    position:absolute;
    top: -webkit-calc(100% - 110px);
    right:10px;
    left:10px;
    height:100px;
    background:gray;
    -webkit-transition: all 2s;
    /*this adds GPU acceleration*/
    transform: translate3d(0,0,0); 
    -webkit-transform: translate3d(0,0,0);
}
.block.hide{
    top: -100px;
}

由于您使用的是-webkit前缀，因此我也使用了它。 calc大多数浏览器都支持：http: //caniuse.com/#search=calc

于 2013-03-12T14:32:35.133 回答
0

一个非常简单但不美观的解决方案是动态定义类：

var stylesheet = document.styleSheets[0];
var ruleBlockHide;

和

//onresize
if(ruleBlockHide) stylesheet.deleteRule(ruleBlockHide);
ruleBlockHide = stylesheet.insertRule('.block.hide{ -webkit-transform:translateY(-'+window.innerHeight+'px); }',stylesheet.cssRules.length);

见：http: //jsfiddle.net/PDU7T/

需要保留对规则的引用的原因是，在每次调整屏幕大小后，必须删除并重新添加规则。

虽然这个解决方案完成了工作，但必须有一些 DOM/CSS 组合允许在没有 javascript 的情况下完成此操作（类似于包含此类块的 100%x100% 元素，但我无法找出任何基于变换的方式）。

于 2013-03-09T23:14:24.993 回答
-1

获取文档宽度。然后使用 java 脚本触发器来触发 css3 翻译。

       function translate(){

       var width = document.body.Width;
        document.getElementById('whateverdiv').style='translateX(' + width + 'px)';

       }
于 2013-03-13T20:23:21.583 回答
-1

这很简单，将以下内容添加到您的 div

.myDiv {
    -webkit-transition-property: left;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    -webkit-transition-delay: initial
}

然后通过添加一个额外的类或通过 jQuery 来改变它的“left”属性

这将沿 x 轴对其进行动画处理

注意：您可以将 -webkit-transition-property 更改为您想要的任何属性，这将为它设置动画

于 2013-03-15T17:49:21.347 回答