61 lines
1.4 KiB
Markdown
61 lines
1.4 KiB
Markdown
+++
|
|
tite = "transition"
|
|
date = 2020-04-13
|
|
# layout: code
|
|
+++
|
|
<script>
|
|
function move_span() {
|
|
let span = document.querySelector("#movableSpan");
|
|
if(span.classList.contains('slided')) {
|
|
span.classList.remove('slided');
|
|
} else {
|
|
span.classList.add('slided');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
Voilà un sujet délicat. Les transitions permettent de changer un paramètre de
|
|
manière progressive sur un temps donné.
|
|
|
|
Pour créer ces effets avec accélération matérielle, il faut les écrire comme
|
|
effets css. Il y a pour ça les paramètres `transitionProperty` et
|
|
`transitionDuration`, avec le paramètre abrégé `transition`. La transition est
|
|
déclenchée la prochaine fois qu'un élément prend la classe impliquée. Par
|
|
exemple :
|
|
|
|
``` html
|
|
<script>
|
|
function move_span(span) {
|
|
let span = document.querySelector("#movableSpan");
|
|
if(span.classList.contains('slided')) {
|
|
span.classList.remove('slided');
|
|
} else {
|
|
span.classList.add('slided');
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
#movableSpan {
|
|
position: relative;
|
|
top: 0;
|
|
left: 0;
|
|
transition: 1s;
|
|
}
|
|
.slided {
|
|
transition: 1s;
|
|
top: 5em !important;
|
|
}
|
|
</style>
|
|
<div>
|
|
<button onclick="move_span()">bouger le span 1</button>
|
|
<span id="movableSpan" >
|
|
texte du span 1
|
|
</span>
|
|
<span>
|
|
texte du span 2
|
|
</span>
|
|
</div>
|
|
```
|
|
[la suite]({% post_url html/2020-04-13-transition-2 %})
|
|
|