CSS 3 | pour ou contre les effets de transition ?

(reprise du message précédent)

L'idée semble intéressante, la seule chose qui me fait un peu douter c'est la qualité de ces animations.

Dire que ce serat forcement plus robuste que javascript c'est peut être vite dit.

En effet on regarde la tentative d'intégration de la propriété border-radius ça fait peur! je préféré encore les bidouilles mutlidiv, multi <b>, ou même les "round corners" javascript.

Si on regarde de prés le document on voit que pour l'initialiser il faut quand même un bon bout de code :

div {
  animation-name: 'diagonal-slide';
  animation-duration: 5s;
  animation-iteration-count: 10;
}

@keyframes 'diagonal-slide' {
  
  from {
    left: 0;
    top: 0;
  }

  to {
    left: 100px;
    top: 100px;
  }
  
}

si on compare avec une transition réalisé avec un bon framework comme mootools :

var fx = new Fx.Styles( 'diagonal-slide', {
   duration: 1000, 
  transition: Fx.Transitions.Quad.easeInOut
});

fx.start({
   'left': 100,
   'top': 100
});

Je triche un peu parce que mon exemple suppose que les style initiaux soit spécifier dans la feuille de style pour que l'on puisse réellement comparer. Toujours est il que ce n'est pas beaucoup plus compliqué d'utilisation.

Par contre et c'est la ou je voulais en venir on a beaucoup plus de possibilité parce qu'on peux choisir entre une palette plus riche d'effet de transitions (voir http://demos.mootools.net/Fx.Transitions ).

Sur le principe séparation présentation / comportement je ne vois pas trop le problème parce qu'un effet sur un menu peut très bien être considéré comme de la présentation.

<edit>Il y a quand même un truc sympa qui est quasi impossible a faire aujourd'hui c'est la propriété "rotate" </edit>
Modifié par matmat (15 Apr 2008 - 22:02)

matmat a écrit :
L'idée semble intéressante, la seule chose qui me fait un peu douter c'est la qualité de ces animations.

Dire que ce sera forcement plus robuste que javascript c'est peut être vite dit.

En effet on regarde la tentative d'intégration de la propriété border-radius ça fait peur! je préféré encore les bidouilles mutlidiv, multi <b>, ou même les "round corners" javascript.

C'est quoi le problème avec cette propriété ? Enfin de toute façon comme les implémentations sont jeunes s'il y a des problèmes ça finira bien par se régler ...

matmat a écrit :
Si on regarde de prés le document on voit que pour l'initialiser il faut quand même un bon bout de code :

div {
  animation-name: 'diagonal-slide';
  animation-duration: 5s;
  animation-iteration-count: 10;
}

@keyframes 'diagonal-slide' {
  from {
    left: 0;
    top: 0;
  }
  to {
    left: 100px;
    top: 100px;
  }
}

si on compare avec une transition réalisé avec un bon framework comme mootools :

var fx = new Fx.Styles( 'diagonal-slide', {
   duration: 1000, 
  transition: Fx.Transitions.Quad.easeInOut
});

fx.start({
   'left': 100,
   'top': 100
});

Je triche un peu parce que mon exemple suppose que les style initiaux soit spécifier dans la feuille de style pour que l'on puisse réellement comparer. Toujours est il que ce n'est pas beaucoup plus compliqué d'utilisation.

Par contre et c'est la ou je voulais en venir on a beaucoup plus de possibilité parce qu'on peux choisir entre une palette plus riche d'effet de transitions (voir http://demos.mootools.net/Fx.Transitions ).

Tu triches pas un peu, tu triches beaucoup. Tu omets la taille de la bibliothèque JavaScript qui n'est pas forcément négligeable ...
Modifié par Changaco (15 Apr 2008 - 22:10)

a écrit :
Toujours est il que ce n'est pas beaucoup plus compliqué d'utilisation.

Il ne s'agit pas ici de facilité d'utilisation ...

En ce qui concerne la robustesse, il me semble qu'une "simple" propriété css nécessitant une certaine implémentation par les navigateurs sera bien plus fiable (en terme de fonctionnement et de performance) qu'un script javascript développé "à la mimine" (j'exclue tout ce qui est framework js soit dit en passant).

En ce qui concerne la propriété border-radius, comme le dit Changaco, les implémentations ne sont pas encore parfaites.

Donc pour faire bref je préfère utiliser les choses pour ce qu'elles sont censées faire plutôt que des "bidouilles" (que ce soit en CSS, en JS et cetera).

Après le débat comportement / présentation n'apportera sans aucun doute aucun élément de réponse ... trop d'arguments de chaque côté ...

Changaco a écrit :

Tu triches pas un peu, tu triches beaucoup. Tu omets la taille de la bibliothèque JavaScript qui n'est pas forcément négligeable ...

Environ 65 Ko pour tous les modules de Mootools ; sinon, en se limitant seulement aux transitions, le fichier ne fait que 20 Ko. C'est tout de même très raisonnable.

Ma comparaison n'avais pas pour but de comparer le poids des deux solutions mais la complexité d'utilisation pour l'utilisateur, le nombre de ligne à écrire pour faire la transition.

Effectivement la bibliothèque a un poid mais elle permet aussi de faire des milliers d'autre choses...

Enfin bon la n'est pas la question!

La proposition est intéressante, c'est pour cela que je trouve qu'il est pas mal de débattre en comparant avec les solutions actuels pour que cela apporte vraiment quelque chose.

En plus je n'ai pas bien lu le document parce qu'en fait ils ont pensé a une solution qui permet des transitions plus sophistiqué a l'aide de :

transition-timing-function:cubic-bezier(<number>, <number>, <number>, <number>) 

Qui permet de créer la courbe que l'on veux ce qui donne encore plus de possibilité qu'avec Mootools par exemple.

D'autre part je critique le border-radius mais a part ça les propriété css3 apporterons plein de bonne chose comme les backgrounds mutliples http://www.w3.org/TR/css3-background/#layering , qui réglerons beaucoup de problème de div inutile. Entre autres bien sûr...

matmat a écrit :
Ma comparaison n'avais pas pour but de comparer le poids des deux solutions mais la complexité d'utilisation pour l'utilisateur, le nombre de ligne à écrire pour faire la transition.

Effectivement la bibliothèque a un poids mais elle permet aussi de faire des milliers d'autre choses ...

Enfin bon la n'est pas la question !

La proposition est intéressante, c'est pour cela que je trouve qu'il est pas mal de débattre en comparant avec les solutions actuels pour que cela apporte vraiment quelque chose.

En plus je n'ai pas bien lu le document parce qu'en fait ils ont pensé a une solution qui permet des transitions plus sophistiqué a l'aide de :

transition-timing-function:cubic-bezier(<number>, <number>, <number>, <number>)

Qui permet de créer la courbe que l'on veux ce qui donne encore plus de possibilité qu'avec Mootools par exemple.

Il y a également autre chose qu'il ne faut pas oublier c'est que JavaScript restera plus souvent désactivé que les effets de transition je pense ...

matmat a écrit :
D'autre part je critique le border-radius mais a part ça les propriété css3 apporterons plein de bonne chose comme les backgrounds mutliples http://www.w3.org/TR/css3-background/#layering , qui réglerons beaucoup de problème de div inutile. Entre autres bien sûr...

Ça je pense que l'on est beaucoup à en attendre l'implémentation ...