Question

我试图使用CSS动画将两个物体（电缆和电缆盖）放在屏幕中央（最终显示盖子越过电缆）。

动画应该是这样的：电缆将从响应（100％宽度）div的右侧淡入并滑入，并且盖子将从左侧淡入并滑入;盖子将被分配一个更高的z-index，使其位于电缆末端的顶部，使其外观覆盖电缆。

理想情况下，按钮点击会触发动画，因为桌面和移动设备上的体验需要相同。这两个对象必须在div的中心（无论其当前宽度）聚集在一起（并略微重叠）。完成后，动画不需要自动反转。

有没有人知道如何实现这一目标？对于我的生活，我无法绕过如何实现这一目标。我感谢任何帮助！

Answer 1

基本思路是首先将一个元素放在屏幕左侧：right: 100%

以及屏幕右侧的其他元素：left: 100%

当用户触发更改时，将左/右设置为50％，将两个元素都放到屏幕中央。

例如，这是一个基本的（和webkit特定的）版本：

HTML：

<button id="doit">show me</button>
<div class="cover">cover</div>
<div class="cable">cable</div>

CSS：

.cover, .cable {
    position: absolute;
    top: 100px;
    width: 100px;
    height: 25px;
    color: white;
    -webkit-transition: all .5s ease;
}

.cover {
    right: 100%;
    background-color: green;
}

.cable {
    left: 100%;
    background-color: red;
}

的javascript：

var doit = document.querySelector('#doit');

doit.addEventListener('click', function() {
    var cover = document.querySelector('.cover');
    var cable = document.querySelector('.cable');

    cable.style.left = "50%";
    cover.style.right = "50%";
});

jsfiddle demo

Answer 2

就动画而言，CSS3过渡在我看来效果最好，因为它们更快更容易做到，但缺点是你一次只能使用一个动画。一个很好的jQuery库来管理它们是http://ricostacruz.com/jquery.transit/。如果您需要更多功能（并且可以牺牲一些速度），请查看http://julian.com/research/velocity/。

jQuery按钮点击很容易做到：

$('#btnid').click(function() {
    // Stuff happens here
});

有关此内容的更多信息，请访问http://api.jquery.com/click/。

最后，对于CSS。我想这将是最难的部分。您可以使用background-image（http://www.w3schools.com/cssref/pr_background-image.asp）设置有线电视图像。我建议您将这两个元素都设置为position: absolute，然后将其设置为z-index: 99999（不要只使用1）。最后，如果对齐方面存在一些问题，您可以使用top，left和margin CSS属性。您可能必须将两个图像放在父div中。

希望这有帮助！

使用CSS转换将多个对象组合在一起

2 个答案: