2017-06-13 34 views
-1

我正在尝试为现在几周创建一个特定的解决方案,并且我已经尝试了很多事情,但我不确定是否有可能实现。我需要你的意见,并指出我正确的做法。下面我想创建:使用tile布局的CSS过渡动画有可能实现?

最初有一个tile布局中的卡一定数量(比如12)被放置在4x3的网格:现在

Initial State

,如果用户点击瓷砖(专栏3),状态更改为以下几点:

选择瓷砖扩展等瓷砖对齐得到一个下面的另一个右侧: enter image description here

挑战是我想创建一个转换从每个瓷砖的初始状态到每个瓷砖在右边对齐的状态。与此同时,点击一个贴图时,它会展开。 注意 - 没有突然变化的位置,没有重新加载页面,最好没有JS(我想写一个纯CSS的解决方案)。一切顺利地动画到新的位置。在第二个屏幕上,如果选择了不同的贴图(从右侧开始),则扩展项目将缩小并进入右侧堆栈,而选定项目将展开并取代当前展开的(B3)。

如果你能指出我正确的方向,这将是很大的帮助。

谢谢。

+0

答案是否定的。不与CSS。 –

+0

为什么downvote?这与这个网站没有关系,或者这个问题不够描述? –

+0

预计您至少会尝试为自己编写代码。堆栈溢出不是代码写入服务。我建议你做一些[**额外的研究**](http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) ,无论是通过谷歌或通过搜索,尝试和。如果您仍然遇到麻烦,请返回**您的代码**并解释您所尝试的内容。 –

回答

-1

您应该检查css flexbox。 使用“订单”属性,您可以为每个方框的订单从2到8, ,每次选择一个方框时,您将其顺序更改为1,并且您还可以更改其尺寸和颜色。

但是,我不认为你只能使用'点击'操作。 我会推荐使用JS来实现你想要的。

希望它有帮助