Skip to main content

Return to Answer

added 694 characters in body
Source Link
BoltClock
BoltClock
  • 716.4k
  • 164
  • 1.4k
  • 1.4k

Transitions are, as Paulie_D says, changes in state. What this "state" refers to, is simply the value of any style property (that can be animated, anyway). Even the spec describes it the same way:

Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time.

BecauseMost other ways of using transitions with or without user interaction do in fact involve JavaScript because CSS doesn't support much state change without requiring user interaction (outside of animations, which are a different beast from transitions), most other ways of using transitions with or without user interaction do in fact involve JavaScript, but that doesn't mean that JavaScript is inherently required for transitions to work, because transitions are about state change, regardless of how that state change is invoked (JS or not).

Most tutorials use :hover and :active to demonstrate transitions simply because user interaction is the easiest and most intuitive way for readers to see transitions in action, and to learn what it means for an element to change state (albeit a different kind of state, but the principle is the same). It's also by far the most common use case for transitions: animating changes in state in response to user interaction.

... or even move elements around in the DOM tree (although this does have limitations — notice that the Foo item fails to start its transition because it's getting detached before being reattached, while the Bar item startsis able to start its transition once it notices it's now first because it never leaves the DOM tree)...

... and be able to start transitions all the same. Notice that all of thesethe JavaScript examples start transitions automatically, no user interaction required.

Transitions are, as Paulie_D says, changes in state. What this "state" refers to, is simply the value of any style property (that can be animated, anyway).

Because CSS doesn't support much state change without requiring user interaction (outside of animations, which are a different beast from transitions), most other ways of using transitions with or without user interaction do in fact involve JavaScript, but that doesn't mean that JavaScript is inherently required for transitions to work, because transitions are about state change, regardless of how that state change is invoked (JS or not).

Most tutorials use :hover and :active to demonstrate transitions simply because user interaction is the easiest and most intuitive way for readers to see transitions in action, and to learn what it means for an element to change state. It's also by far the most common use case for transitions: animating changes in state in response to user interaction.

... or even move elements around in the DOM tree (although this does have limitations — notice that the Foo item fails to start its transition because it's getting detached before being reattached, while the Bar item starts its transition once it notices it's now first)...

... and be able to start transitions all the same. Notice that all of these examples start transitions automatically, no user interaction required.

Transitions are, as Paulie_D says, changes in state. What this "state" refers to, is simply the value of any style property (that can be animated, anyway). Even the spec describes it the same way:

Normally when the value of a CSS property changes, the rendered result is instantly updated, with the affected elements immediately changing from the old property value to the new property value. This section describes a way to specify transitions using new CSS properties. These properties are used to animate smoothly from the old state to the new state over time.

Most other ways of using transitions with or without user interaction do in fact involve JavaScript because CSS doesn't support much state change without requiring user interaction (outside of animations, which are a different beast from transitions), but that doesn't mean that JavaScript is inherently required for transitions to work, because transitions are about state change, regardless of how that state change is invoked (JS or not).

Most tutorials use :hover and :active to demonstrate transitions simply because user interaction is the easiest and most intuitive way for readers to see transitions in action, and to learn what it means for an element to change state (albeit a different kind of state, but the principle is the same). It's also by far the most common use case for transitions: animating changes in state in response to user interaction.

... or even move elements around in the DOM tree (although this does have limitations — notice that the Foo item fails to start its transition because it's getting detached before being reattached, while the Bar item is able to start its transition once it notices it's now first because it never leaves the DOM tree)...

... and be able to start transitions all the same. Notice that all the JavaScript examples start transitions automatically, no user interaction required.

Source Link
BoltClock
BoltClock
  • 716.4k
  • 164
  • 1.4k
  • 1.4k

Transitions are, as Paulie_D says, changes in state. What this "state" refers to, is simply the value of any style property (that can be animated, anyway).

This means that you don't actually need a selector to start transitions. Styles can be changed via CSS, JavaScript, or the inline style attribute. All of these are subject to transitions, because they all modify style property values. Selectors just happen to be the most common way of doing it because selectors and declaration blocks are the two fundamental components that make up style rules, themselves the building blocks of CSS.

Because CSS doesn't support much state change without requiring user interaction (outside of animations, which are a different beast from transitions), most other ways of using transitions with or without user interaction do in fact involve JavaScript, but that doesn't mean that JavaScript is inherently required for transitions to work, because transitions are about state change, regardless of how that state change is invoked (JS or not).

Most tutorials use :hover and :active to demonstrate transitions simply because user interaction is the easiest and most intuitive way for readers to see transitions in action, and to learn what it means for an element to change state. It's also by far the most common use case for transitions: animating changes in state in response to user interaction.

But you don't actually need to change property values with a user interaction pseudo-class in order for transitions to work. You can change them with any selector, even if user interaction is handled by a different element (and that element doesn't have to start transitions using :hover or :active either)...

label {
  transition: color 1s linear;
}

:checked + label {
  color: #f00;
}
<p><input type=checkbox id=check><label for=check>Label</label>

... or by the page itself...

h1 {
  transition: color 1s linear;
}

:target {
  color: #f00;
}
<p><a href=#sec1>Section 1</a> <a href=#sec2>Section 2</a>
<h1 id=sec1>Section 1</h1>
<h1 id=sec2>Section 2</h1>

Once you add JavaScript into the mix, you can set property values directly (i.e. not use a selector)...

setTimeout(function() {
  document.querySelector('p').style.color = '#f00';
}, 1000);
p {
  transition: color 1s linear;
}
<p>Wait for it...

... change an element's class, ID or other attribute...

setTimeout(function() {
  document.querySelector('p.foo').className = 'bar';
}, 1000);

setTimeout(function() {
  document.getElementById('foo').id = 'bar';
}, 2000);

setTimeout(function() {
  document.querySelector('p[data-attr]').dataset.attr = 'bar';
}, 3000);
p {
  transition: color 1s linear;
}

p.bar { color: #f00; }
p#bar { color: #090; }
p[data-attr=bar] { color: #00f; }
<p class=foo>Wait for it...
<p id=foo>Wait for it...
<p data-attr=foo>Wait for it...

... or even move elements around in the DOM tree (although this does have limitations — notice that the Foo item fails to start its transition because it's getting detached before being reattached, while the Bar item starts its transition once it notices it's now first)...

setTimeout(function() {
  var ul = document.querySelector('ul');
  ul.appendChild(ul.firstChild);
}, 1000);
li {
  transition: color 1s linear;
}

li:first-child { color: #f00; }
<ul><li>Foo<li>Bar</ul>

... and be able to start transitions all the same. Notice that all of these examples start transitions automatically, no user interaction required.

So, in conclusion, transitions are about state change, and said state change pertains to changes in style property values. These are independent of selectors or JavaScript, although selectors are a fundamental part of CSS and you do need JavaScript for most things.