(Désolé, je ne peux pas fournir de code de ce que je demande, car je ne sais pas vraiment où commencer.)
À propos du transitions significatives point dans les directives de conception des matériaux < / a>.
Je suis très intéressé par la création d'une transition aussi douce dans mes applications Web ( surtout celui où la photo de profil va d'une activité à une autre ), mais je me demande comment le faire en utilisant HTML?
en un mot, est prêt à être prêt pour de telles choses (n'importe quel code / documentation serait apprécié)? Devrions-nous attendre que certains outils de polymère fassent cela? Ou devrions-nous simplement ne pas faire cela dans le Web?
3 Réponses :
Autant que je sache, le polymère est censé pouvoir faire tout cela. Sinon, cela devrait être capable de pouvoir bientôt.
L'idée de base derrière le polymère est de vous permettre de créer des interfaces cohérentes sur tous les périphériques (Web, ordinateur, Android). Donc, si Android L peut faire ces transitions, alors ils signifient très certainement que le polymère a également cette capacité.
Polymère ne fait rien de ces choses. Ceci est tout simplement HTML + CSS + JavaScript. Et vous pouvez faire tout cela sans polymère.
Tout polymère fait, est-ce que cela vous permet d'encapsuler ces éléments dans un élément personnalisé.
Les éléments centraux et les éléments papier sont quelques exemples. Vous pouvez construire des éléments vous-même ou un clonage et la modifier / les étendre.
+1 @vloz: avec Chrome Dev Outils Vous pouvez voir le CSS pour les animations et activer "Afficher l'agent utilisateur Shadow Dom" pour examiner un élément de polymère
Consultez l'élément Polymer Core-Animated-pages d'animation https: //elements.polymère -Project.org/elements/neon-animation
Ils ont de bonnes démos très similaires aux transitions significatives https://elements.polymère-project.org/elements/neon-animation?view=demo: démo / index.html & actif = pages d'animation néon p>
L'icône de la démo "icon to top bar" est probablement la plus similaire à celle que vous avez référencée (vous pouvez simplement voir la source pour voir le Composants Web polymères utilisés, le long de la CSS & JS nécessaire P>
Vous pouvez importer dans votre projet via Bower: P>
<style>
#hero1 {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
background-color: orange;
}
#hero2 {
position: absolute;
top: 200px;
left: 300px;
width: 300px;
height: 300px;
background-color: orange;
}
#bottom1, #bottom2 {
position: absolute;
bottom: 0;
top: 0;
left: 0;
height: 50px;
}
#bottom1 {
background-color: blue;
}
#bottom2 {
background-color: green;
}
</style>
// hero-transition and cross-fade are declared elsewhere
<core-animated-pages transitions="hero-transition cross-fade">
<section id="page1">
<div id="hero1" hero-id="hero" hero></div>
<div id="bottom1" cross-fade></div>
</section>
<section id="page2">
<div id="hero2" hero-id="hero" hero></div>
<div id="bottom2" cross-fade></div>
</section>
</core-animated-pages>
Vous voudrez peut-être ajouter certaines des données clés de vos liens en tant que réponses uniquement liées uniquement pour que les liens ne soient pas pertinentes si les pages qu'elles transmettent pour aller hors ligne pour une raison quelconque.
Génial c'est exactement ce que je cherchais! Merci! :)
Très bienvenue, je devais chasser un moment pour celui-là et aimer expérimenter des pages d'animation de base