VirtualScroll and CSS animation

Hi !
I wanna use ion-list/ion-card components with virtual scroll and when user click on ion-card, the card turn over.
I use css animation with rotate3d.
But, virtual scroll seems to use translate3d to put vertical position of each element.

So when I use rotate3d, the card go to the top of the container behind the first card element to perform the animation and then back to its place…any idea ?

I fixed my problem with custom component.

But, new problems appeared :

  1. virtualScroll with infinite scroll => the first “ion-list” rendering is bad, each transform3D applied is wrong (miss the padding), it’s fixed after the first scroll
    I think it’s an ionic problem when you combine the two components

  2. when you resize the window => the card fit to window witdh size but the transform3D applied isn’t recalculated…so with the text-wrap you obtained strange things…

  3. i used two different texts for front and back => virtual-position is calculated with the front text…but when you flip the card…the virtual-position isn’t recalculated (in the documention is recommanded to lock the component size)
    How i can keep the same size between the back and the front with different texts ?
    => i need to know the bigger string size between back and front, and then force it to the other side ?

Thx :slight_smile:

New plunker to test : https://plnkr.co/edit/rBNMZ9OOYoYkClQaViba?p=preview

I’ve updated the plunker.

  1. fixed by calling virtualScroll.readUpdate(true) after each resize event

  2. I used another flash-card component method…so i can easily compute the card max size and force it

But the first point isn’t resolved yet ! And I test without the infinite scroll => same issue !

https://plnkr.co/edit/rBNMZ9OOYoYkClQaViba?p=preview

I’ve opened an issue about that : https://github.com/ionic-team/ionic/issues/12741.

Feel free to contribute, if you know somethings about that :slight_smile:

Before I give you many usless infos, check out if this is what you want to achieve

http://weeklystyle.de/ldetail/225

1 Like

Yes, it’s something like that but with virtual scroll to avoid memory issue with big number of cards into the DOM.

PS : In any case bravo, it’s pretty :slight_smile:

Thanks. I found a link to a Flash Card component here in the forum and played around with it.

I haven’t used virtual scroll at the moment. I used the flash-card component in an ionic grid with infinite scroll and had two issues.

First. When the infinite scroll load new items the old items changed position every time.
Secound. When the card flip and the back of the card is higher then the front heigh of the card the row height wont change and I got overlays.

But try it out.

Here is my version of the Flash Card component.

flash-card.html:


<div class="flip-container" [class.flipped]="flipped">
  <div class="flipper">
    <div class="front" *ngIf="flipped==false">
      <ng-content select=".flash-card-front"></ng-content>
    </div>
    <div class="back" *ngIf="flipped==true">
      <ng-content select=".flash-card-back"></ng-content>
    </div>
  </div>
  <ion-fab top right>
    <button ion-fab mini outline (click)="flip()">
      <ion-icon *ngIf="flipped == false" name="arrow-dropright"></ion-icon>
      <ion-icon *ngIf="flipped == true" name="arrow-dropleft"></ion-icon>
    </button>
  </ion-fab>
</div>

flash-card.module.ts

import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { FlashCardComponent } from './flash-card';

@NgModule({
  declarations: [
    FlashCardComponent,
  ],
  imports: [
    IonicModule,
  ],
  exports: [
    FlashCardComponent
  ]
})
export class FlashCardComponentModule {}

flash-card.css

 /* flip the pane when clicked */
    .flip-container.flipped .flipper {
        transform: rotateY(180deg);
    }
    
    /* flip speed goes here */
    .flipper {
        transition: 0.6s;
        transform-style: preserve-3d;
    }
    
    
    /* front pane, placed above back */
    .front {
        z-index: 2;
        /* for firefox 31 */
        transform: rotateY(0deg);
    }
    
    /* back, initially hidden pane */
    .back {
        transform: rotateY(180deg);
    }

    /* hide back of pane during swap */
    .front, .back {
        backface-visibility: hidden;
    }
    
    /* front pane, placed above back */
    .front {
        z-index: 2;
        /* for firefox 31 */
        transform: rotateY(0deg);
    }
    
    /* back, initially hidden pane */
    .back {
        transform: rotateY(180deg);
    }

flash-card.ts

import { Component } from '@angular/core';

/**
 * Generated class for the FlashCardComponent component.
 *
 * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html
 * for more info on Angular Components.
 */
@Component({
  selector: 'flash-card',
  templateUrl: 'flash-card.html'
})

export class FlashCardComponent {

  flipped: boolean = false;

  constructor() { }

  flip() {
    this.flipped = !this.flipped;
  }

}

How to use it (page.html)

<flash-card>
        <div class="flash-card-front">
          <!-- Content front -->
        </div>

        <div class="flash-card-back">
             <!-- Content back -->
        </div>
</flash-card>