2
Я надеялся, что кто-то более осведомленный о Полимере может помочь мне разобраться в этой проблеме. Я создал приложение barebones, чтобы продемонстрировать проблему, которую я испытываю на своем веб-сайте. По сути, у меня возникают проблемы с анимацией пульсации, которая искажает анимацию моего героя. Если я удалю анимацию пульсации, я получаю нормальную анимацию героя, но когда я добавляю анимацию пульсации, она искажает анимацию героя.Polymer - Ripple Animation Skews Hero Animation
Вот разница я говорю (Посмотрите на красной коробке и как она тянется):
Вот некоторые из моего кода
тест-приложение .html
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="test-app">
<template>
<style>
neon-animated-pages{
position:relative;
height:100%;
}
.box{
border:5px solid black;
width:500px;
height:500px;
position:relative;
overflow:hidden;
}
</style>
<div class="box">
<neon-animated-pages on-click="switchPages" selected="{{openNeonPage}}">
<hero-test-card></hero-test-card>
<hero-test-fixed></hero-test-fixed>
</neon-animated-pages>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'test-app',
properties:{
openNeonPage:{
type:'String',
value:"0"
}
},
switchPages:function(event){
if(this.openNeonPage == "0")
this.openNeonPage = "1";
else
this.openNeonPage = "0";
}
});
</script>
герой тест-card.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hero-test-card">
<template>
<style>
div{
position:absolute;
width:150px;
height:150px;
background: red;
}
</style>
<div id="card">
<p>Content</p>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'hero-test-card',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties:{
animationConfig:{
value:function(){
return{
'exit':[{
name:'hero-animation',
id:'hero',
fromPage:this,
},{
name:'ripple-animation',
id:'ripple',
fromPage:this
}]
}
}
},
sharedElements:{
value:function(){
return{
'hero':this.$.card,
'ripple':this.$.card
}
}
}
}
});
</script>
герой тест-fixed.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hero-test-fixed">
<template>
<style>
#fixed{
position:absolute;
width:100%;
height:100%;
background: green;
bottom:0;
right:0;
}
#card{
position:absolute;
width:150px;
height:150px;
bottom:0;
right:0;
background:red;
}
</style>
<div id="fixed">
<div id="card">
<p>content</p>
</div>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'hero-test-fixed',
behaviors: [
Polymer.NeonSharedElementAnimatableBehavior
],
properties:{
animationConfig:{
value:function(){
return{
'entry':[{
name:'ripple-animation',
id:'ripple',
toPage:this
},{
name:'hero-animation',
id:'hero',
toPage:this,
}]
}
}
},
sharedElements:{
value:function(){
return{
'hero':this.$.card,
'ripple':this.$.fixed
}
}
}
}
});
</script>
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="bower_components/neon-animation/neon-animation.html">
<link rel="import" href="bower_components/neon-animation/neon-animated-pages.html">
<link rel="import" href="bower_components/neon-animation/neon-shared-element-animatable-behavior.html">
<link rel="import" href="bower_components/neon-animation/animations/ripple-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/scale-down-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/slide-from-right-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/fade-in-animation.html">
<link rel="import" href="bower_components/neon-animation/animations/hero-animation.html">
<link rel="import" href="elements/card-for-tile.html">
<link rel="import" href="elements/tile-container.html">
<link rel="import" href="elements/raw-tile.html">
<link rel="import" href="elements/test-app.html">
<link rel="import" href="elements/hero-test-card.html">
<link rel="import" href="elements/hero-test-fixed.html">
<!-- <link rel="import" href="bower_components/iron-flex-layout/classes/iron-flex-layout.html"> -->
<style>
html, body{
height:100%;
}
</style>
</head>
<body fullbleed unresolved>
<test-app></test-app>
</body>
</html>
Вот пример, который я смоделировал после: http://morethanreal.github.io/neon-animation-demo/bower_components/neon-animation/demo/grid/index.html – tnort173