116 lines
5.0 KiB
HTML
116 lines
5.0 KiB
HTML
[!]
|
|
[=title "Week 13: Transitions"]
|
|
[=content-]
|
|
<p>
|
|
We can make simple static pages, and we can add color and style to them. With <code>:hover</code> (see <a href="week-13-hover.html">Week 13: Hover</a> if you haven't already!)
|
|
we can make webpages that react <i>instantly</i> to changes.
|
|
</p>
|
|
<p>
|
|
What if we want to react gradually? For instance, we might want a sidebar to expand slowly, or
|
|
we might want a link to change color slowly instead of immediately. For this we use
|
|
<code>transition</code>! Transition is a weird property in that it doesn't set anything
|
|
itself - it <i>only</i> describes <i>how to transition between other properties</i>.
|
|
</p>
|
|
<p>
|
|
This means <code>transition</code> is completely useless if we don't have any
|
|
properties changing on our page. Fortunately, <code>:hover</code> <i>can</i>
|
|
change properties, so we can animate <code>:hover</code> with a transition!
|
|
</p>
|
|
<p>
|
|
The syntax looks like <code>transition: property duration;</code>, so for instance,
|
|
<code>transition: background-color 1s;</code> literally means "take exactly 1 second
|
|
to go from the old background color to the new one whenever it changes". Applying
|
|
that to the example from the Hover article:
|
|
</p>
|
|
<pre><code>#my_button {
|
|
padding: 10px;
|
|
background-color: purple;
|
|
color: white;
|
|
transition: background-color 1s;
|
|
}
|
|
#my_button:hover {
|
|
background-color: white;
|
|
color: purple;
|
|
}</code></pre>
|
|
<p>
|
|
<style>#my_button1{ padding: 10px; background-color: purple; color: white; transition: background-color 1s; } #my_button1:hover {background-color: white; color: purple; }</style>
|
|
The result looks like this: <span id="my_button1">My Button</span>
|
|
</p>
|
|
<p>
|
|
Try hovering it - it will take exactly 1 second for it to go from purple to white, and 1 second to go back!
|
|
</p>
|
|
<p>
|
|
Note that the color still changes instantly - we never told CSS to transition the color,
|
|
so it didn't. Transition supports comma-separated values like this:
|
|
<code>transition: background-color 1s, color: 1s;</code>, so let's try that!
|
|
</p>
|
|
<pre><code>#my_button {
|
|
padding: 10px;
|
|
background-color: purple;
|
|
color: white;
|
|
transition: background-color 1s, color 1s;
|
|
}
|
|
#my_button:hover {
|
|
background-color: white;
|
|
color: purple;
|
|
}</code></pre>
|
|
<p>
|
|
<style>#my_button2{ padding: 10px; background-color: purple; color: white; transition: background-color 1s, color 1s; } #my_button2:hover {background-color: white; color: purple; }</style>
|
|
The result looks like this: <span id="my_button2">My Button</span>
|
|
</p>
|
|
<p>
|
|
<i>Much</i> smoother.
|
|
</p>
|
|
<p>
|
|
It bears note that not every property can <code>transition</code>! For instance,
|
|
<code>font-family</code> can't be transitioned - what would that even do?
|
|
We call this <i>animatable</i> - any property that is not <i>animatable</i>
|
|
will not do anything in a transition (or animation - we'll get to animations later).
|
|
A list of every property that can be transitioned is found <a href="https://www.w3schools.com/cssref/css_animatable.php">on W3Schools</a>.
|
|
</p>
|
|
<p>
|
|
You can transition things that change the layout! CSS will <i>recompute</i> the layout for you. For instance,
|
|
if I have,
|
|
</p>
|
|
<pre><code>#my_text_block {
|
|
margin-left: 200px;
|
|
margin-right: 200px;
|
|
background-color: green;
|
|
transition: margin 1s; /* note that this transitions margin-left and margin-right automatically -
|
|
I could specify them separately, but that's a waste of time! */
|
|
}
|
|
#my_text_block:hover {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
}</code></pre>
|
|
<style>
|
|
#my_text_block {
|
|
margin-left: 200px;
|
|
margin-right: 200px;
|
|
background-color: green;
|
|
transition: margin 1s; /* note that this transitions margin-left and margin-right automatically -
|
|
I could specify them separately, but that's a waste of time! */
|
|
}
|
|
#my_text_block:hover {
|
|
margin-left: 0px;
|
|
margin-right: 0px;
|
|
}
|
|
</style>
|
|
<p>
|
|
Then the result is something like,
|
|
</p>
|
|
<p id="my_text_block">
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus et volutpat nisi. Pellentesque id accumsan arcu. Nunc tempus, lorem ut venenatis blandit, quam orci pretium neque, ac bibendum nulla ex vel lectus. Curabitur viverra justo orci, eget porta erat ultrices a. In dictum ante nec quam semper ultrices. Pellentesque ac interdum tortor. Nam ultrices risus risus, vel vulputate turpis faucibus sed. Aenean eget urna vulputate, vulputate tortor molestie, varius dui. Quisque id ipsum auctor, dapibus lacus eget, laoreet eros. Morbi dignissim velit sed ipsum viverra, egestas efficitur nisl pretium. Cras eu porta turpis.
|
|
</p>
|
|
<p>
|
|
<i>Try hovering it - it'll expand out to the edges!</i>
|
|
</p>
|
|
<p>
|
|
Transitions can also be used with transforms and positions! This is very fun; I'm not going to go through any examples,
|
|
but I <i>highly</i> recommend playing with it. If you need to brush up on <code>transform</code>,
|
|
check out <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transform">MDN's bit on the topic</a>
|
|
(an example transition for a simple 2-second animation would be <code>transition: transform 2s;</code>).
|
|
</p>
|
|
[/]
|
|
[#template.html]
|