2017-06-13 4 views
-1

J'essaye de créer une solution spécifique pendant des semaines maintenant et j'ai essayé beaucoup de choses mais je ne suis juste pas sûr s'il est possible du tout de réaliser. J'ai besoin de vos opinions et me pointe dans la direction d'une approche correcte. À la suite de ce que je suis en train de créer:animation de transition CSS avec la disposition des carreaux est-il possible de réaliser?

Dans un premier temps il y a une disposition des carreaux dans lequel un certain nombre de cartes (par exemple 12) sont placés dans la grille 4x3:

Initial State

Maintenant, si l'utilisateur clique sur une tuile (encadré 3), les changements d'état à suivre:

carrelage sélectionné est étendu et d'autres tuiles s'alignés les uns en dessous des autres sur le côté droit: enter image description here

Le défi est que je veux créer un transition de l'état initial de chaque tuile à l'état où chaque tuile est alignée l'un au-dessous de l'autre sur la droite. En même temps, quand un carreau est cliqué, il est étendu en place. Note - il n'y a pas de changement soudain de position, pas de rechargement de page et de préférence pas de JS (je voulais écrire une solution CSS uniquement). Tout s'anime en douceur à la nouvelle position. À partir du deuxième écran si une autre tuile est sélectionnée (à partir de la droite), l'objet développé rétrécira et ira dans la pile de droite tandis que l'élément sélectionné s'élargira et prendra la place de l'actuel (B3).

Si vous pouviez simplement me diriger vers la bonne direction ce serait une aide précieuse.

merci.

+0

La réponse est non. Pas avec CSS. –

+0

Pourquoi downvote ?? n'est-ce pas lié à ce site ou la question n'est-elle pas assez descriptive? –

+0

Vous devriez au moins tenter de le coder pour vous-même. Stack Overflow n'est pas un service d'écriture de code. Je suggère que vous fassiez un peu de [** recherche supplémentaire **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , soit via Google ou en cherchant SO, faire une tentative et. Si vous avez encore des problèmes, revenez avec ** votre code ** et expliquez ce que vous avez essayé. –

Répondre

-1

Vous devriez vérifier css flexbox. En utilisant la propriété "ordre", vous pouvez ordonner chaque boîte de 2 à 8, et chaque fois qu'une boîte est sélectionnée, vous changez son ordre à 1 et vous changez également sa taille et sa couleur. Cependant, je ne pense pas que vous pouvez utiliser les actions 'click' avec css seulement. Je recommanderais d'utiliser JS pour ce que vous essayez d'accomplir.

Espérons que ça aide