如何使用CSS3过渡让元素滑动进来

Question

我真的很想知道如何使滑动过渡，我不确定它是否可以用纯css或如果javascript是需要的。我将给出一个例子网站。我说的过渡是当你选择左边栏上的一个方形图标时，蓝色的描述会滑到div中。

进入北极

Answer 1

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

Answer 2

这在CSS中很容易做到，只需将包含div(带有类或id)放置在不可见的位置，并在需要可见时添加一个类(添加该类需要JavaScript)。

可见度类获得最终定位。

在基类上定义一个CSS过渡，使改变的属性动画化，例如:

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

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

Answer 3

完全可以在CSS中这样做，这取决于你想用什么作为动画的触发器。

对于更持久的状态，如链接的示例，可以使用复选框(或单选)hack来完成。

注意:能做并不意味着应该做。虽然在某些情况下这可能适合您，但一般来说，通过使用javascript触发动画，您将对行为有更多的控制，并且在标记中具有更大的灵活性。浏览器支持也是一个考虑因素。

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

• CSS技巧:你可以用"Checkbox Hack"做的事情
• CSS忍者:纯CSS可折叠树菜单

一个简单的例子:

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;
}

演示小提琴

工作原理:复选框位于屏幕外。当用户单击标签时，将切换关联的复选框。如果选中复选框，则触发匹配的兄弟选择器，将左侧设置为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);
}

演示小提琴