Il n'y a aucun moyen de le faire de manière simple, parce que pour faire de l'animation de diapositives, vous devez avoir au moins 2 pages déjà rendus: d'abord celui qui est décalé et deuxième qui remplace le premier. Dans un exemple de showcase avec un onglet animé, tous les onglets sont rendus et sont prêts à être utilisés, mais CellTable avec SimplePager n'a pas de pages rendues, sauf une nouvelle page visible qui est simplement affichée directement dans le corps de CellTable.
Donc, si vous voulez vraiment créer cet effet en utilisant CellTable et Pager, vous devez implémenter votre propre paire de CellTable et Pager qui fera ce qui suit:
- Conserver 2 conteneurs avec des lignes rendus: l'un est visible, la seconde est cachée.
- Le corps CellTable doit avoir viewport (juste une div < div avec la règle CSS "overflow: hidden") qui aura les deux conteneurs à l'intérieur.
- Lorsque la page de changement de pager, vous devez forcer CellTable à rendre les nouvelles lignes dans un conteneur caché.
- Lorsque de nouvelles données ont été rendues, placez votre conteneur caché dans la bonne position pour faire illusion qu'il continue à être visible et le rendre visible;
- Fournir une animation qui déplacera les deux conteneurs dans de nouvelles positions. Je recommande de ne pas utiliser de codage pour les animations (par exemple Timer) - beaucoup mieux et efficace pour utiliser les règles de transformation CSS3 (voir "CSS3 transform Property" et/ou "CSS3 transition Property").
- Une fois l'animation terminée, masquez le premier conteneur et placez des pointeurs sur les conteneurs visibles et cachés, afin de revenir à l'état initial.
Espérons que cela aide.