8
Trước tiên, tôi có một thời gian khó khăn để hiểu các nguyên tắc cơ bản của sự chuyển đổi anh hùng trong Polymer. Tôi đang cố gắng xây dựng một thẻ chuyển đổi anh hùng giống như thẻ trong ví dụ được cung cấp bởi chúng, có thể được tìm thấy here. Dưới đây tôi đã xây dựng thẻ mini và tôi chỉ đang cố gắng hiểu quá trình chuyển đổi và cách thẻ lớn hơn hoạt động với thẻ nhỏ hơn.Cách Polymer Hero Transition hoạt động
Câu hỏi cụ thể của tôi là, sự chuyển đổi liên kết với từng phần tử như thế nào? Tôi có cần hoàn thành CSS cho cả hai trước khi tôi có thể bắt đầu chơi với các trang hoạt ảnh lõi không? Có vấn đề mẫu nhúng không?
Mọi hướng dẫn sẽ cực kỳ hữu ích.
<script src="../components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="../components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="../components/core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../components/paper-button/paper-button.html">
<link rel="import" href="../components/core-image/core-image.html">
<link rel="import" href="../components/paper-shadow/paper-shadow.html">
<polymer-element name="chip-card">
<template>
<style>
#page2 {
width: 100%;
height: 100%;
}
#paper_shadow {
position: relative;
display: inline-block;
font-family:'Roboto', sans-serif;
font-size: 12px;
color: white;
}
#chip_body {
height: 400px;
width: 300px;
background-color: aqua;
color: black;
}
#chip_top {
background-color: deeppink;
background-image: url();
background-size: cover;
background-position: center center;
width: 100%;
position: relative;
}
#chip_bottom {
background-color: #fbfbfb;
width: 100%;
height: 20%;
position: relative;
font-size: 1.2em;
word-wrap: break-word;
}
#text {
padding-left: 5%;
padding-right: 2.5%;
overflow: hidden;
}
#coreImage {
display: block;
}
#card_container {
width: 70%;
height: 600px;
background-color: aqua;
color: black;
}
#card_right {
height: 100%;
width: 30%;
}
#card_left {
background-color: darkblue;
height: 100%;
width;
70%;
}
#card_left_top {
padding-right: 20px;
padding-top: 20px;
background-color: skyblue;
}
#circle {
width: 30px;
height: 30px;
border-radius: 50%;
background-color: red;
}
#header_text {
}
#card_content {
width:100%;
background-color: lightcoral;
}
</style>
<core-animated-pages transitions="hero-transition" selected={{page}}>
<section>
<paper-shadow z="1" id='paper_shadow' on-mouseover="{{raise}}" on-mouseout="{{lower}}" animated=true; hero-p="" on-tap="{{transition}}">
<div id="chip_body" hero-id="chip_body" vertical layout center justified>
<div id="chip_top" flex>
<div id="coreImage">
<content select="#core-image"></content>
</div>
</div>
<div id="chip_bottom" vertical layout start-justified>
<div id='text'>
<content select="#chip_bottom"></content>
</div>
</div>
</div>
</paper-shadow>
</section>
<section id="page2">
<div id="card_container" hero-id="chip_body" on-tap="{{transition}}" hero=""></div>
</section>
</core-animated-pages>
</template>
<script>
Polymer('chip-card', {
page: 0,
raise: function() {
this.$.paper_shadow.setZ(2);
},
lower: function() {
this.$.paper_shadow.setZ(1);
},
transition: function(e) {
if (this.page === 0) {
this.$.paper_shadow = e.currentTarget;
this.page = 1;
} else {
this.page = 0;
}
}
});
</script>
</polymer-element>
Liên kết của bạn dẫn đến http://127.0.0.1:04939/html/chip_to_card.html, vui lòng khắc phục sự cố. – krzysiej
@krzysiej - Cảm ơn bạn đã đánh bắt, cố định. – user2023068