Polymer Hero Animation In Reverse

Question

Je n'arrive pas à comprendre comment en douceur anime retour à l'origine d'une animation de héros. Par cela je veux dire, j'ai une carte de papier avec un tas de html (img, texte, ect) dessus, que je peux "héros" dans un autre élément très bien; mais je voudrais être en mesure de "anti-héros" retour à la (beaucoup plus petite) carte-papier en douceur. Mes tentatives ne produisent que des transitions vers l'arrière très déformées. L'effet que j'essaie d'imiter est de Google's 2015 IO sous les «Sections présentées». Google affiche une grille de vignettes, qui, lorsqu'il est cliqué, héros dans les vidéos YouTube. En appuyant sur la flèche retour anti-heros retour à la grille Sections vedette ... en douceur. Des pensées?

Je suis désolé pour les blocs de code, je n'ai pas assez de réputation pour afficher quelque chose.

Mon animationConfig est

animationConfig: { 
    value: function() { 
     return { 
      'entry': [{ 
       name: 'cascaded-animation', 
       animation: 'scale-up-animation' 
      }, 
      { 
       name: 'hero-animation', 
       id: 'hero', 
       toPage: this 
      }], 

     'exit': [{ 
      name: 'cascaded-animation', 
      animation: 'scale-down-animation' 
     }, 
     { 
      name: 'hero-animation', 
      id: 'hero', 
      fromPage: this 
     }] 
     } 
    } 
} 

Et quand un événement du robinet est tiré en cliquant sur un élément, je masquer les articles restants et héros du point cliqué.

_onItemTap: function(event) { 
    var nodes = this.$.scrollUp.children; 
    var nodesToScale = []; 

    for(var node, index = 0; node = nodes[index]; index++) { 
     if (node !== event.detail.item) { 
      nodesToScale.push(node); 
     } 
    } 

    this.animationConfig['entry'][0].nodes = nodesToScale; 
    this.animationConfig['exit'][0].nodes = nodesToScale; 
    this.sharedElements = {'hero': event.detail.item}; 
    this.fire('feed-item-tap', {item: event.detail.item, data: event.detail.data}); 
} 

Cela rend très bien. Le innerHTML de Element2 est effacé à l'entrée pour paraître plus gracieux.

animationConfig: { 
    value: function() { 
     return { 
      'entry': [{ 
       name: 'cascaded-animation', 
       animation: 'fade-in-animation', 
       nodes: [this.$.bio, this.$.pic], 
       timing: {delay: 500, duration: 2000} 
      }, 
      { 
       name: 'hero-animation', 
       id: 'hero', 
       toPage: this 
      }], 

      'exit': [{ 
       name: 'hero-animation', 
       id: 'hero', 
       fromPage: this 
      }] 
     } 
    } 
} 

sharedElements: { 
    value: function() { 
     return { 
      'hero': this.$.more_details 
     } 
    } 
} 

Encore une fois, les animations se produisent dans les deux sens, mais le héros de element2 retour à element1 ne reproduit pas le comportement sur le site de Google IO.

Answer 1

Vous appliquez deux animations à l'entrée avec cascade et retard tout en jouant simultanément l'animation du héros. Essayez de simplifier l'utilisation de l'animation héroïque uniquement. L'animation sur la page IO de Google ressemble à un simple héros.

Comme ceci:

animationConfig: { 
 
    value: function() { 
 
    return { 
 
     'entry': { 
 
     name: 'hero-animation', 
 
     id: 'hero', 
 
     toPage: this 
 
     }, 
 

 
     'exit': { 
 
     name: 'hero-animation', 
 
     id: 'hero', 
 
     fromPage: this 
 
     } 
 
    } 
 
    } 
 
}, 
 

 
sharedElements: { 
 
    value: function() { 
 
    return { 
 
     'hero': this.$.more_details 
 
    } 
 
    } 
 
}