Comment glisser dans les divs de hors de l'écran, dans une mise en page en utilisant les transitions CSS?

J'ai une grille de divs en position absolue (la grille est constituée d'différemment en forme de rectangles qui s'assemblent pour faire un grand rectangle).

Je suis en train d'animer l'affichage de cette grille en ayant toutes les rectangles "voler" dans la grille de l'écran. Si les rectangles sur la gauche de la mouche de la gauche, sur la droite de la droite etc.

Je suis à l'aide de transitions CSS3 et lors d'un vol en haut ou de gauche, il fonctionne parfaitement, je viens d'utiliser des marges négatives pour les positionner hors de l'écran, puis animer ce changement à la marge de gauche (ou de la marge-haut) = 0 (par exemple, l'orignal/position correcte).

Ce qui semble faire plus de sens que l'utilisation des transformations mais s'il vous plaît corrigez-moi si vous pensez qu'il y a une raison qui transforme travailler/faire mieux pour une raison quelconque?

Cependant de toute évidence, cela ne fonctionnera pas pour margin-right/margin-top et donc je voulais voir si quelqu'un peut suggérer que la meilleure façon d'y parvenir est de la droite et le bas? Je peux faire le parent overflow:hidden et animer le coin supérieur gauche des positions qui aura le même effet, mais je voulais voir si il y a une solution générique équivalent à une marge négative de manière à éviter d'avoir besoin des règles distinctes/positions pour chaque arrêt et sur l'écran de la version? par exemple lors de l'utilisation des marges négatives que je peux appliquer la même marge négative pour toutes les cases qui volent à partir du même côté sans avoir aucun élément spécifique de la marque (mais si je animer le haut/gauche puis chaque élément a besoin de sa propre "hors champ" position par rapport à sa position finale, de sorte à ce qu'il vole à partir de la droite).

Sinon, si il ya une meilleure façon en général (CSS3 est très bien!) puis j'aimerais entendre!

OriginalL'auteur deshg | 2014-06-19

  1. 23

    De ne pas les animer avec des marges, toujours animées avec transformations, c'est-à leur utilisation prévue. Voici un excellent article de Paul Irish

    Pourquoi le déplacement des éléments à traduire() est mieux
    http://paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/

    Utilisation overflow-x: hidden pour masquer les divs venant de la droite. Voici un violon j'ai fait pour montrer comment vous pouvez animer avec transformer sans spécifier des valeurs de pixel;

    http://jsfiddle.net/P9GNS/3/

    HTML

    <div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>
<div class="box-wrapper loading"><div class="box"></div></div>

    CSS

    body {
    overflow-x: hidden;
}


.box-wrapper {
    -webkit-transition-duration: 600ms;
    transition-duration: 600ms;
}


.box-wrapper.loading:nth-child(odd) { transform: translate(100%) }
.box-wrapper.loading:nth-child(even) { transform: translate(-100%) }


.box-wrapper:nth-child(odd)  .box { background: orange }
.box-wrapper:nth-child(even) .box { background: red }


.box {
    margin: auto;
    width: 100px;
    height: 100px;
}

    JAVASCRIPT

    $('.box-wrapper').each(function(index, element) {

    setTimeout(function(){
        element.classList.remove('loading');
    }, index * 600);

});
    Merci beaucoup Michael, qui est parfait, mon mauvais pour ne pas essayer d'utiliser des transformations premier qui fait beaucoup plus de sens et fonctionne exactement comme nécessaire. Merci encore!
    juste une question de suivi, cela fonctionne en utilisant 100% de transformation lorsque les wrappers de prendre tout l'espace disponible, mais je vais essayer de glisser divs dans un autre div qui ne prend que la partie de la fenêtre d'affichage. Cela signifie que si vous utilisez 100%, il ne semble pas hors de l'écran (et je ne peux pas utiliser de débordement cachés sur le div conteneur sinon ils ne volent pas en de hors de l'écran). Quelle est la meilleure façon de traiter ce problème? Je peux évidemment utiliser transformer 10000% ou similaire pour assurer son chemin hors de l'écran (pour des grands écrans), mais cela ne semble pas la bonne façon de traiter avec elle? Merci!
    Vous pouvez spécifier une valeur de pixel au lieu d'un pourcentage. Je dois le voir car cela dépend vraiment de ce que cela ressemble.
    si vous avez de la chance, j'ai ajouté une autre question à stackoverflow.com/questions/24434593/... qui donne un exemple de ce que je suis en train de faire. Merci!

    OriginalL'auteur Michael

  2. 2

    Généralement transform: translate... vous donne de meilleures performances sur la plupart des navigateurs, parce qu'ils tentent de rendre l'animation en utilisant le GPU.

    Vous pouvez vérifier les résultats de jsperf.

    De toute façon une autre bonne solution ( sans javascript ) serait d'associer l'animation entièrement en CSS avec @keyframes et animation: propriété.

    Plus d'informations sur cette question est en cet article.

    De lignes directrices, vous pouvez lire

    Utiliser les CSS animation avec des images clés ou les transitions CSS, si possible. Le navigateur peut optimiser la peinture et la composition bigtime ici.

    Merci pour votre réponse rapide, même si je suis légèrement confus que les lignes directrices de dire "Utiliser les CSS animation avec des images clés ou les transitions CSS" mais vous, vous dites transformer offre de meilleures performances? On peut supposer que si j'utilise des images clés ou transformer si j'ai toujours le même problème d'avoir à animer le haut/gauche des positions et donc de fixer des positions sur et hors de l'écran pour chaque rectangle (plutôt qu'un générique marge négative pour plusieurs rectangles)? C'est peut-être la seule façon, mais je voulais voir si il y a une alternative générale? Merci beaucoup
    J'ai essayé de vous donner un rapide jsbin avec l'effet désiré jsbin.com/qozinoqu/1
    Merci beaucoup drinchev, qui a le sens parfait et c'est de ma faute de n'avoir pas avec transforme en premier. Je l'obtenir maintenant! Merci 🙂

    OriginalL'auteur drinchev