在屏幕外隐藏部分元素并在点击时推送和显示

Question

我正在构建一个响应式页面，当在移动设备上查看时，它包含一些流行的行为。

我有一个包含文本和链接的元素。文本部分需要覆盖 100% 的视口宽度，当单击/点击链接时，应将文本内容向左推并显示链接。

小提琴：http://jsfiddle.net/Flignats/0n0fwm20/

HTML：

<div id="container">
    <div id="block-one">
        I'm a bunch of informational text.
    </div>
    <div id="block-two">
        <a href="#">I'm a link!</a>
    </div>
</div>

CSS：

#container {
    width: 100%;
    height: 100px;
}

#block-one {
    float: left;
    width: 75%;
    height: 100px;
    background-color: #626366;
}
#block-two {
    float: left;
    width: 25%;
    height: 100px;
    background-color: #969696;
}
    #block-two a {
        color: blue;
    }

我怎样才能让第一块跨越屏幕的整个宽度，第二块隐藏在屏幕之外，并且在点击时，将第二块动画（边距？）第二块推到左侧的视图中?

如果我错过了一个明确的现场示例，我深表歉意，大多数其他问题都比较复杂。

我不希望构建 jquery 移动页面，尽管推送和显示面板会完成此操作。如果 nganimate 优于 javascript，我也会使用 Angular。

Answer 1

这里是纯 css 解决方案：http://jsfiddle.net/3wcfggmf/

我使用了 label 和 checkbox:checked 的技巧来识别元素是否被点击。

input:checked + #block-one {
  width: 75%;
}

如果我没有正确理解你，请告诉我，我会为你修改这个 PURE css 解决方案:)

Answer 2

我在这里用一个工作示例叉了你的小提琴：http://jsfiddle.net/90gm224q/

为你添加了 CSS：

#container * { transition: width .4s; }
#container.clicked #block-one { width:25%; }
#container.clicked #block-two { width:75%; }

JS：

var container = document.getElementById('container'),
    link = document.getElementById('block-two').getElementsByTagName('a')[0];

link.onclick = function() {
    container.className = 'clicked';
    return false;
}

假设我正确理解了您的问题，您可以使用 CSS 宽度值来达到您想要的效果。

Answer 3

您可以通过 CSS 转换 和 JavaScript 类切换 来完成此操作。

演示 - http://jsfiddle.net/Leh5t9t6/

在我的演示中，单击#block-one 会切换一个触发 CSS 转换的类。我在演示中包含了一个纯 JavaScript 和 jQuery 版本（你提到你不想使用 jQuery）。

我还稍微编辑了样式以适应屏幕外链接。

纯 Javascript

 var element = document.getElementById('block-one');
 element.addEventListener('click', function () {
   this.classList.toggle('reveal');
 }, false);

jQuery

$('#block-one').on('click', function(){
    $(this).toggleClass('reveal');
});