A CSS class is a named classification applied to elements so matching CSS rules can style them. JavaScript can add or remove classes as an element’s state changes. section 5.3 section 7.4
Use classes in two common ways:
- Add several classes to compose an effect, such as shake, shake-constant, and shake-horizontal; add shake-little for a shorter strum, then remove them when the timer ends. section 5.3
- Use a class as a local selector, such as template.default-card, when choosing among templates inside a component. section 7.4
Animating an element with classes
strum(params) { this.classList.add('shake', 'shake-constant', 'shake-horizontal'); if (dur < 500) this.classList.add('shake-little'); this.timer = setTimeout(() => this.stopStrum(), dur); } stopStrum() { this.classList.remove('shake', 'shake-constant', 'shake-horizontal', 'shake-little'); }
