Question

我真的想知道如何进行滑动转换，我不知道是否可以使用纯css或者如果需要javascript。我将举一个示例网站。我正在谈论的转变是当您选择左侧栏上的一个方形图标并且蓝色描述滑入div时。

Answer 1

在CSS中很容易做到，只需将包含div（带有类或id）放在非可见位置，并在需要显示时添加一个类（用于添加该类需要JavaScript）。

可见性等级获得最终定位。

在基类上，您可以定义一个CSS转换，该转换可以动画更改的属性，例如：

div.base {
    transition: left 2s;
    position:relative;
    left:-200px; /* behind something else */
}
div.visible {
    left:0px;
}

编辑：如果性能有问题，您应该使用transform而不是left，例如transform: translate(-200px,0);。这也使得可以根据需要定位元素，例如：浮动。

Answer 2

您可以使用CSS animate属性通过更改边距和/或填充来为对象设置动画以创建滑动效果

Answer 3

可以纯粹在CSS中执行此操作，具体取决于您要用作动画触发器的内容。

对于像链接示例这样的更持久的状态，可以使用复选框（或无线电）黑客来完成。

注意：仅仅因为它可以完成，并不意味着它应该完成。虽然有些情况下这可能对您有用，但通常情况下，通过使用javascript触发动画，您可以更好地控制标记中的行为和更大的灵活性。浏览器支持也是一个考虑因素。

有关复选框hack的更多信息：

一个简单的例子：

HTML：

<label for="toggle-1">A</label>
<input class="A" type="checkbox" id="toggle-1">
<label for="toggle-2">B</label>
<input class="B" type="checkbox" id="toggle-2">
<label for="toggle-3">C</label>
<input class="C" type="checkbox" id="toggle-3">
<div class="A">Panel A</div>
<div class="B">Panel B</div>
<div class="C">Panel C</div>

CSS：

/* Positions the checkbox off the screen */
input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

/* Initial DIV position off screen - this is the panel */
div {
   position: absolute;
   width: 400px;
   height: 100px;
   line-height: 100px;
   left: -400px;
   -webkit-transition: left .5s ease;
}

/* Toggled State */
input[type=checkbox].A:checked ~ div.A,
input[type=checkbox].B:checked ~ div.B,
input[type=checkbox].C:checked ~ div.C {
   left: 0;
}

demo fiddle

工作原理：复选框位于屏幕外。当用户单击标签时，将切换关联的复选框。如果选中该复选框，则会触发匹配的同级选择器，将左侧设置为0px - 将面板向右移动。如果取消选中该复选框，则选择器不再匹配，导致left属性恢复为原始的-400px值，将面板向左移动。

此版本存在问题：因为这些是复选框，所以在执行某些用户操作之前，它们会一直处于检查状态。如果用户没有关闭其中一个面板，则打开的下一个面板将在已打开的面板上方或下方滑动，具体取决于其在DOM或z-index中的顺序。

也可以使用单选按钮来执行此操作，但问题是无法在纯CSS实现中取消选择单选按钮，因此，一旦选定，面板将始终可见，直到下一个面板被选中。

您可以将一些javascript与上面的内容混合以获得您喜欢的行为或在javascript中添加更多控件。

一个简单的javascript示例（我建议找到比这更好的代码！）：

HTML

<div class="sel">A</div>
<div class="sel">B</div>
<div class="sel">C</div>
<div class="panel A">Panel A</div>
<div class="panel B">Panel B</div>
<div class="panel C">Panel C</div>

CSS（类似于之前的，但没有复选框选择器）

/* Default State */
.panel {
   position: absolute;
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
    left: -400px;
    -webkit-transition: left .5s ease;
}

/* Toggled State */
.opened {
   left: 0;
}

代码：

var selectors = document.querySelectorAll('.sel');
var curSelected;

function select(evt) {
    var panels = document.querySelectorAll('.opened');
    var target = evt.target.innerText.trim();
    var i;

    for(i = 0; i < panels.length; ++i) {
        panels[i].classList.toggle('opened');
    }

    if(target !== curSelected) {
        document.querySelector('.panel.' + target).classList.toggle('opened');
        curSelected = target;
    } else {
        curSelected = false;
    }
}

for(var i = 0; i < selectors.length; ++i) {
    selectors[i].addEventListener('click', select);
}

demo fiddle

如何使用CSS3过渡使元素滑入？

3 个答案: