From 61828deed27491ebe1e98283da23eae60f63632f Mon Sep 17 00:00:00 2001 From: lafleur Date: Fri, 9 Oct 2020 05:20:20 +0200 Subject: [PATCH] relref replaces jekyll's links --- content/posts/transition-2.md | 3 ++- content/posts/transition-3.md | 23 ++++++++++------------- content/posts/transition-4.md | 14 +++++++------- content/posts/transition.md | 5 +++-- {data => static/js}/transition-3.js | 0 {data => static/js}/transition-4.js | 0 6 files changed, 22 insertions(+), 23 deletions(-) rename {data => static/js}/transition-3.js (100%) rename {data => static/js}/transition-4.js (100%) diff --git a/content/posts/transition-2.md b/content/posts/transition-2.md index 215c51c..bf7ce71 100644 --- a/content/posts/transition-2.md +++ b/content/posts/transition-2.md @@ -1,6 +1,7 @@ +++ title = "transitions II - javascript" date = 2020-04-13 +tags = ["html"] # layout: code +++ + On a la possibilité de donner des réglages par défaut à nos transitions en css ; ça permet d'alléger le javascript, et de contrôler les paramètres de la @@ -12,16 +12,13 @@ transition depuis le css. Ici `move_into(el, destEl)` va utiliser une classe qui durera le temps de la transition, qui s'appelera `transition-deplacement`. On pourra y stocker des valeurs par défaut pour la transition. Par exemple, - -{% highlight js %} - el.style.top = ""; -{% endhighlight %} - +``` js +el.style.top = ""; +``` donnera à l'élément `el` la valeur `top` décrite dans le css. Comme `el` appartient à la classe `transition-deplacement` qui dit que `top = 0;` eh ben voilà. - -{% highlight js %} +``` js function move_into(el, destEl) { if(el.classList.contains('transition-deplacement')) { console.log('! already movin'); @@ -36,7 +33,7 @@ function move_into(el, destEl) { console.log("élément", el, "déclassé"); }); } -{% endhighlight %} +``` Pour finir, `toggle(el, destEl)` utilisera une autre classe pour déterminer si `el` a déjà été ouvert, la classe `ouvert`. Si oui, il le mettra dans le parent @@ -45,7 +42,7 @@ direct de `destEl`. Dans ce cas, on n'utilise même pas cette classe dans le css. Elle ne sert qu'à javascript. -{% highlight js %} +``` js function toggle(el, destEl) { if(el.classList.contains('ouvert')) { el.classList.remove('ouvert'); @@ -55,10 +52,10 @@ function toggle(el, destEl) { move_into(el, destEl); } } -{% endhighlight %} +``` Tous ces points sont dans le fichier javascript inclus dans la page à partir de -[là]({% link html/transition-3.js %}). Et maintenant le html et la +[là](/js/transition-3.js). Et maintenant le html et la prévisualisation : ``` html