From 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f Mon Sep 17 00:00:00 2001
From: SphinxKnight <SphinxKnight@users.noreply.github.com>
Date: Fri, 17 Sep 2021 20:15:31 +0200
Subject: Prepare CSS section for Markdown conversion (#2307)

* Removes summary / seoSummary classes

* Remove div class=hidden and some notranslate

* Remove hidden paragraphs for live sample

* Remove hidden paragraphs for live sample - take 2

* Remove other hidden div and p - updated w/ en-US when necessary

* Remove ids

* Remove notranslate class

* Fix typo which broke build

* remove div class='index'

* remove useless <span style=...>

* remove non typographical sups

* remove non typographical subs

* remove blockindicator and fix some div.note

* fix build :/

* remove useless classes

* fix build - again :x

* fix unhandled elements 1/N + embedlivesample build fail

* fix div.warning

* Fix fixable flaws - hoping to reduce error conversion

* Remove unecessary images (same as en-US)

* fix div notes

* fix warnings

* fix some dl handling

* fix dls

* Fix a bunch of conversion errors

* rm unhandled figures

* Fix other set of issues and revamp easing-function page

* Fix some one-offs conversion errors (incl. deki files)

* fix the rest of one-off conversion issues

* Fix last dl standing
---
 files/fr/web/css/transition-duration/index.html | 279 ++++--------------------
 1 file changed, 42 insertions(+), 237 deletions(-)

(limited to 'files/fr/web/css/transition-duration')

diff --git a/files/fr/web/css/transition-duration/index.html b/files/fr/web/css/transition-duration/index.html
index 6cce9a7304..d24b28832a 100644
--- a/files/fr/web/css/transition-duration/index.html
+++ b/files/fr/web/css/transition-duration/index.html
@@ -14,8 +14,6 @@ translation_of: Web/CSS/transition-duration
 
 <div>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</div>
 
-<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
-
 <p>Il est possible de définir plusieurs durées, chacune sera appliquée à la propriété correspondante listée par {{cssxref("transition-property")}} (qui agit comme un index des propriétés impactées par les animations). S'il y a moins de durées que d'éléments dans cette liste, l'agent utilisateur dupliquera les durées. S'il y a trop de durées, la liste sera tronquée. Dans les deux cas, la déclaration CSS sera considérée comme valide.</p>
 
 <h2 id="Syntaxe">Syntaxe</h2>
@@ -46,267 +44,74 @@ transition-duration: unset;
 
 <h2 id="Exemples">Exemples</h2>
 
-<div>
-<div id="duration_0_5s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-duration: 0.5s</code></p>
+<h3 id="exemple_illustrant_differentes_durees">Exemple illustrant différentes durées</h3>
 
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
-  &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
-  </pre>
+<h4>HTML</h4>
 
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position:absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration:0.5s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration:0.5s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top:25px;
-    position:absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration:0.5s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transformv color;
-    transition-duration:0.5s;
-    transition-timing-function: ease-in-out;
-}
-</pre>
+<pre class="brush:html">
+  &lt;div class="box duration-1"&gt;0,5 secondes&lt;/div&gt;
 
-<pre class="brush:js">function updateTransition() {
-  var el = document.querySelector("div.box");
+  &lt;div class="box duration-2"&gt;2 secondes&lt;/div&gt;
 
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
-}
+  &lt;div class="box duration-3"&gt;4 secondes&lt;/div&gt;
 
-var intervalID = window.setInterval(updateTransition, 7000);
+  &lt;button id="change"&gt;Changer&lt;/button&gt;
 </pre>
-</div>
-
-<div>{{EmbedLiveSample("duration_0_5s",275,150)}}</div>
-</div>
 
-<div id="duration_1s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-duration: 1s</code></p>
+<h4>CSS</h4>
 
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
-  &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
-  </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
+<pre class="brush:css;">
 .box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position:absolute;
-    -webkit-transition-property: width height background-color font-size left top -webkit-transform color;
-    -webkit-transition-duration:1s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform color;
-    transition-duration:1s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top:25px;
-    position:absolute;
-    -webkit-transition-property: width height background-color font-size left top -webkit-transform transform color;
-    -webkit-transition-duration:1s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration:1s;
-    transition-timing-function: ease-in-out;
+  margin: 20px;
+  padding: 10px;
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background-color: red;
+  font-size: 18px;
+  transition-property: background-color font-size transform color;
+  transition-timing-function: ease-in-out;
 }
-</pre>
 
-<pre class="brush:js">function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
+.transformed-state {
+  transform: rotate(270deg);
+  background-color: blue;
+  color: yellow;
+  font-size: 12px;
+  transition-property: background-color font-size transform color;
+  transition-timing-function: ease-in-out;
 }
 
-var intervalID = window.setInterval(updateTransition, 7000);
-</pre>
-</div>
-
-<div>{{EmbedLiveSample("duration_1s",275,150)}}</div>
-</div>
-
-<div id="duration_2s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-duration: 2s</code></p>
-
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
-  &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
-  </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position:absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration:2s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration:2s;
-    transition-timing-function: ease-in-out;
+.duration-1 {
+  transition-duration: 0.5s;
 }
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top:25px;
-    position:absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration:2s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration:2s;
-    transition-timing-function: ease-in-out;
-}
-</pre>
 
-<pre class="brush:js">function updateTransition() {
-  var el = document.querySelector("div.box");
-
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
-  }
-
-  return el;
+.duration-2 {
+  transition-duration: 2s;
 }
 
-var intervalID = window.setInterval(updateTransition, 7000);
-</pre>
-</div>
-
-<div>{{EmbedLiveSample("duration_2s",275,150)}}</div>
-</div>
-
-<div id="duration_4s" style="width: 251px; display: inline-block; margin-right: 1px; margin-bottom: 1px;">
-<p><code>transition-duration: 4s</code></p>
-
-<div class="hidden">
-<pre class="brush:html"> &lt;div class="parent"&gt;
-  &lt;div class="box"&gt;Lorem&lt;/div&gt;
-&lt;/div&gt;
-  </pre>
-
-<pre class="brush:css;">.parent { width: 250px; height:125px;}
-.box {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    font-size: 20px;
-    left: 0px;
-    top: 0px;
-    position:absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration:4s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration:4s;
-    transition-timing-function: ease-in-out;
-}
-.box1{
-    transform: rotate(270deg);
-    -webkit-transform: rotate(270deg);
-    width: 50px;
-    height: 50px;
-    background-color: blue;
-    color: yellow;
-    font-size: 18px;
-    left: 150px;
-    top:25px;
-    position:absolute;
-    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
-    -webkit-transition-duration:4s;
-    -webkit-transition-timing-function: ease-in-out;
-    transition-property: width height background-color font-size left top transform -webkit-transform color;
-    transition-duration:4s;
-    transition-timing-function: ease-in-out;
+.duration-3 {
+  transition-duration: 4s;
 }
 </pre>
 
-<pre class="brush:js">function updateTransition() {
-  var el = document.querySelector("div.box");
+<h4>JavaScript</h4>
 
-  if (el) {
-    el.className = "box1";
-  } else {
-    el = document.querySelector("div.box1");
-    el.className = "box";
+<pre class="brush:js">function change() {
+  const elements = document.querySelectorAll("div.box");
+  for (let element of elements) {
+    element.classList.toggle("transformed-state");
   }
-
-  return el;
 }
 
-var intervalID = window.setInterval(updateTransition, 7000);
+const changeButton = document.querySelector("#change");
+changeButton.addEventListener("click", change);
 </pre>
-</div>
 
-<div>{{EmbedLiveSample("duration_4s",275,150)}}</div>
-</div>
-</div>
+<h4>Résultat</h4>
+
+<div>{{EmbedLiveSample("exemple_illustrant_differentes_durees",275,200)}}</div>
+
 
 <h2 id="Spécifications">Spécifications</h2>
 
-- 
cgit v1.2.3-54-g00ecf