Fix css for flipped card

README.md

@@ -21,7 +21,7 @@ mode on mobile (breakpoint is at 600px). In `manual` mode the card will be unaff
 
 `height` - The height of the embeddable. Ex. values `40vh` `300px`. Default: `560px`
 
-`network` - The name of the network the asset is on `mainnet` or `rinkeby`. Default: `mainnet`.
+`network` - The name of the network the asset is on `mainnet` or `testnet`. Default: `mainnet`.
 
 `referrerAddress` - The address of the referrer. Check out the [SDK docs](https://github.com/ProjectOpenSea/opensea-js#affiliate-program) to learn more about the Affiliate program.
 

example/index.html

@@ -40,8 +40,8 @@ <h3>Show users any crypto collectible and let them buy it straight from your sit
 <div class="card-container">
     <div style="padding-top: 5vh;"></div>
     <nft-card
-            tokenAddress="0x2a46f2ffd99e19a89476e2f62270e0a35bbf0756"
-            tokenId="22371"
+            tokenAddress="0x2af75676692817d85121353f0d6e8e9ae6ad5576"
+            tokenId="57897811519642769493188138992815967602818565423779439302449631235552458049983"
             network="mainnet"
     >
     </nft-card>

src/nft-card-back.ts

@@ -49,6 +49,7 @@ const traitHeight = {
 export class NftCardBackTemplate extends LitElement {
   @property({ type: Object }) public traitData!: TraitData
   @property({ type: Object }) public openseaLink?: string
+  @property({ type: Boolean }) public flippedCard: boolean = false
   @property({ type: Boolean }) public loading = true
   @property({ type: Boolean }) public horizontal!: boolean
   @property({ type: Number }) public cardHeight!: number
@@ -63,8 +64,15 @@ export class NftCardBackTemplate extends LitElement {
         text-decoration: none;
         color: inherit;
       }
+      .card-back.is-flipped {
+        transition-delay: 0.2s;
+        transition-property: visibility;
+        visibility: initial;
+        backface-visibility: initial;
+      }
       .card-back {
         position: absolute;
+        visibility: hidden;
         backface-visibility: hidden;
         width: 100%;
         height: 100%;
@@ -461,7 +469,7 @@ export class NftCardBackTemplate extends LitElement {
 
   public render() {
     return html`
-      <div class="card-back">
+      <div class="card-back ${classMap({ 'is-vertical': !this.horizontal, 'is-flipped': this.flippedCard })}">
         <info-button
           style="position: absolute; top: 5px; right: 5px"
           @flip-event="${(_e: any) =>

src/nft-card-front.ts

@@ -19,9 +19,13 @@ export class NftCardFrontTemplate extends LitElement {
   @property({ type: Object }) public asset?: OpenSeaAsset
   @property({ type: Boolean }) public horizontal!: boolean
   @property({ type: Object }) public state!: State
+  @property({ type: Boolean }) public flippedCard: boolean = false
 
   static get styles() {
     return css`
+      .card-front.is-flipped {
+        display: none;
+      }
       .card-front {
         position: absolute;
         backface-visibility: hidden;
@@ -197,7 +201,7 @@ export class NftCardFrontTemplate extends LitElement {
     const { network } = this.state
 
     return html`
-      <div class="card-front ${classMap({ 'is-vertical': !this.horizontal })}">
+      <div class="card-front ${classMap({ 'is-vertical': !this.horizontal, 'is-flipped': this.flippedCard })}">
         ${this.asset.traits.length > 0
           ? html`
               <info-button

src/nft-card.ts

@@ -56,7 +56,7 @@ export class NftCard extends LitElement {
 
   @property({ type: Object }) private asset!: OpenSeaAsset
   @property({ type: Object }) private traitData: object = {}
-  @property({ type: String }) private flippedCard: boolean = false
+  @property({ type: String }) public flippedCard: boolean = false
   @property({ type: Object }) private provider: Web3Provider = null
   @property({ type: Object }) private seaport!: OpenSeaPort
 
@@ -207,12 +207,14 @@ export class NftCard extends LitElement {
         .state=${{
           network: this.network,
         }}
+        .flippedCard="${this.flippedCard}"
       ></nft-card-front>
       <nft-card-back
         .horizontal=${this.horizontal}
         .traitData=${this.traitData}
         .openseaLink="${this.asset.openseaLink}"
         @flip-event="${this.eventHandler}"
+        .flippedCard="${this.flippedCard}"
       ></nft-card-back>
     `
   }