Angulaire De La Conception De Matériel D'Animation
Je suis en train de développer une application web mobile avec AngularJS, ngAnimate, Angulaires-le Matériel et l'INTERFACE utilisateur du Routeur. Je suis la suite Google Matériau spécifications de Conception pour l'UI/UX partie.
J'aimerais animer un changement d'état 'l'angle de manière" et surtout ce "Parent-enfant" animation
Je n'ai aucune idée sur la façon d'atteindre cette "lift & étendre' animation.
Merci pour votre aide !
OriginalL'auteur thibaut | 2015-05-16
Vous devez vous connecter pour publier un commentaire.
Que vous avez à faire vous-même, je suppose.
Angulaires-le matériel n'est pas une baguette magique qui réplique l'animation des lignes directrices de la Conception de Matériel. Matériel de Conception de lignes directrices sont simplement des directives, et sont assez lâche pour être piraté ou strictement suivie, dans le cas de l'Android de Google apps (maison ou pas).
Mon sentiment, c'est l'angle de matériel de l'équipe est déjà à pousser comme des fous pour amener cet outil génial à 1,0, et de profiter de la nouveau système de routage dans Angulaire 2 de fournir quelques animations comme celle que vous désirez atteindre la sortie de la boîte.
Mais c'est le saignement de la pointe de la pointe du progrès, au moins pour le moment.
Les bonnes nouvelles semblent être que les routes ont leurs propres fenêtres et le frère de fenêtres.
AngularJS un peu commence à embrasser du Polymère de composants web concept.
Faites défiler jusqu'à "Montrez-moi la magie!" sur cette page, et vérifier ces démos. Polymère de l'écosystème fournit un grand nombre de déjà composants pour construire votre application avec. Il est assez grand, et vous fait vous demander pourquoi Polymère ne pas obtenir le même élan que AngularJS. Mais je m'égare...
Option 1
créer un fonction qui se déclenche sur une liste de l'élément cliqué/taraudé, à placer dans votre contrôleur (ou directive).
Une fois que l'utilisateur clique sur/robinets de l'élément de la liste, il déclenche la fonction (console de test).
La fonction :
Pourquoi absolue de vue nommée? Parce qu'il permettra, avec z-indexation, pour la liste de rester en dessous du "point de détail" de la vue, de sorte que lorsque l'utilisateur ferme/la laisse, vous pouvez restaurer votre animation, et le rectangle retrouve exactement les dimensions et la position de l'élément de la liste. Enfin, la transition de l'opacité:0 et quitter la route.
Option 2
Voici un accidenté de la maquette d'une technique d'étirement/défilement d'un ion-élément. Il aurait besoin pour détecter la position y de l'élément, et l'utilisation ionicScrollDelegate pour faire défiler jusqu'à. Aussi, vous geler le principal, faites défiler jusqu'à l'utilisateur d'obtenir des "coincé", jusqu'à ce qu'il ferme la "vue détaillée", qui libère alors de la faire défiler.
Un très de base JSFiddle, qui doit être affiné (cliqué sur l'élément doit défiler vers le milieu de l'écran, puis développez).
Noter que le JSFiddle seulement les blocs de la molette de défilement. Si semble bloquer la première utilisation, mais alors le ng-cliquez sur la libère, de sorte qu'il est, c'est loin d'être parfait. Vous ne devriez pas seulement bloquer la liste de défilement, mais le haut et le bas de balayage événements.
Aussi il initalizes mal, fonctionne seulement la deuxième fois. Mais le concept pourrait être quelque chose comme ça.
C'était juste pour le concept. Fondamentalement, vous avez juste besoin de détecter les coordonnées x et y de l'objet. Ou plus simple : vous intercepter le clic, et vous tournez les cliqué sur un élément de liste 100vh, avec la transition.
Encore une fois, merci pour votre réponse ! Je vais essayer cela dès que possible.
Cela est également intéressant : rich harris.co.royaume-uni/ramjet - La seule chose, c'est, pour l'instant, il n'est pas si facile de penser en termes d'un div, qui se transforme en un autre, parce que nous avons à remplir ce dernier état, avec quelques données, une fois l'animation terminée. Et aussi de disposer d'un mécanisme qui déclenche un état, sans changer de parcours. Nous avons affaire ici à l'un des défis de HTML5 pages d'aujourd'hui : transformer les choses, tout en conservant l'état de l'transformations, et le contexte de l'application.
OriginalL'auteur Christian Bonato