CSS `Custom State `:–my-state` 与 `CSS Transitions` 联动

各位观众老爷，大家好！今天咱们来聊点新鲜的，把CSS Custom State和 Transitions这两位好兄弟拉出来溜溜，看看他们能擦出怎样的火花。保证让你的网页交互体验，Duang~一下，升华到新的境界！

第一幕：Custom State，闪亮登场！

Custom State，也叫自定义状态，是CSS的新特性，它允许我们定义自己的伪类，就像:hover、:focus一样。这玩意儿有啥用呢？简单来说，就是让我们可以根据一些非标准的、自定义的条件来改变元素的样式。

在过去，我们实现一些复杂的状态切换，可能需要借助JavaScript来添加或删除类名。现在有了Custom State，很多场景下，我们可以直接在CSS里搞定，代码更简洁，维护更方便。

Custom State的语法很简单，以:开头，然后是两个短横线--，后面跟着你自定义的状态名称。例如，:--loading、:--active、:--selected等等。

举个栗子：

button {
  background-color: lightblue;
  color: black;
}

button:--loading {
  background-color: gray;
  color: white;
  cursor: wait;
}

这段代码表示，当button元素处于--loading状态时，背景色变成灰色，文字颜色变成白色，鼠标指针变成等待状态。

那么问题来了，这个--loading状态怎么触发呢？这就需要JavaScript出马了。我们可以使用Element.toggleAttribute()方法来添加或删除aria-selected属性，然后CSS根据aria-selected属性来激活Custom State。

<button id="myButton" aria-selected="false">点击加载</button>

<script>
  const button = document.getElementById('myButton');

  button.addEventListener('click', () => {
    button.toggleAttribute('aria-selected');
  });
</script>

<style>
  button {
    background-color: lightblue;
    color: black;
    cursor: pointer;
  }

  button[aria-selected="true"] {
    background-color: gray;
    color: white;
    cursor: wait;
  }
</style>

这里，我们通过点击按钮切换aria-selected属性的值，从而改变按钮的样式。 虽然看起来还是需要通过javascript来控制，但是可以结合CSS Transitions来实现动画效果。

第二幕：Transitions，华丽转身！

Transitions，也就是过渡，是CSS中用于创建平滑动画效果的利器。它可以让元素的属性值在一段时间内平滑地过渡到另一个值，而不是瞬间切换。

Transitions的基本语法如下：

transition: property duration timing-function delay;

• property: 要过渡的CSS属性，例如background-color、opacity、transform等等。
• duration: 过渡的持续时间，单位是秒(s)或毫秒(ms)。
• timing-function: 过渡的速度曲线，例如ease、linear、ease-in、ease-out等等。
• delay: 过渡的延迟时间，单位是秒(s)或毫秒(ms)。

举个栗子：

button {
  background-color: lightblue;
  color: black;
  transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
  background-color: darkblue;
  color: white;
}

这段代码表示，当鼠标悬停在button元素上时，背景色和文字颜色都会在0.3秒内平滑地过渡到新的值。

第三幕：Custom State + Transitions，完美搭档！

现在，让我们把Custom State和Transitions这两个好兄弟结合起来，看看能搞出什么大新闻。

我们可以利用Custom State来触发状态的改变，然后利用Transitions来让这些改变以动画的形式呈现。

例如，我们可以给上面的--loading状态添加Transitions：

button {
  background-color: lightblue;
  color: black;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}

button[aria-selected="true"] {
  background-color: gray;
  color: white;
  cursor: wait;
}

这样，当按钮进入--loading状态时，背景色和文字颜色会平滑地过渡到灰色和白色。

看起来效果和button:hover差不多，但是，aria-selected 属性可以根据我们的需要进行变化，不再局限于鼠标的hover状态。
下面我们来一个更复杂的例子，实现一个可折叠的面板：

<div class="accordion">
  <div class="accordion-header" aria-expanded="false">
    面板标题
  </div>
  <div class="accordion-content">
    面板内容
  </div>
</div>

<style>
  .accordion-header {
    background-color: lightblue;
    padding: 10px;
    cursor: pointer;
  }

  .accordion-content {
    padding: 10px;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease;
  }

  .accordion-header[aria-expanded="true"] + .accordion-content {
    height: 100px; /* 或者 auto，根据实际内容调整 */
  }
</style>

<script>
  const accordionHeader = document.querySelector('.accordion-header');

  accordionHeader.addEventListener('click', () => {
    accordionHeader.toggleAttribute('aria-expanded');
  });
</script>

在这个例子中，我们使用aria-expanded属性来表示面板的展开状态。当aria-expanded为true时，面板展开，height属性从0过渡到100px（或者auto，根据实际内容调整）。

进阶玩法：结合CSS变量

Custom State还可以和CSS变量结合使用，实现更灵活的样式控制。

例如，我们可以定义一个CSS变量来控制元素的透明度：

:root {
  --opacity: 0;
}

.element {
  opacity: var(--opacity);
  transition: opacity 0.3s ease;
}

.element:--visible {
  --opacity: 1;
}

这段代码表示，当.element元素处于--visible状态时，--opacity变量的值会变为1，从而改变元素的透明度。

实战演练：创建一个开关按钮

接下来，我们来一个稍微复杂一点的例子，创建一个带动画效果的开关按钮。

<div class="switch" aria-checked="false">
  <div class="switch-track">
    <div class="switch-thumb"></div>
  </div>
</div>

<style>
  .switch {
    width: 60px;
    height: 30px;
    background-color: #ccc;
    border-radius: 15px;
    position: relative;
    cursor: pointer;
  }

  .switch-track {
    width: 100%;
    height: 100%;
    border-radius: 15px;
  }

  .switch-thumb {
    width: 26px;
    height: 26px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 0.3s ease;
  }

  .switch[aria-checked="true"] .switch-thumb {
    transform: translateX(30px);
  }

  .switch[aria-checked="true"] {
    background-color: #4CAF50;
  }
</style>

<script>
  const switchElement = document.querySelector('.switch');

  switchElement.addEventListener('click', () => {
    switchElement.toggleAttribute('aria-checked');
  });
</script>

在这个例子中，我们使用aria-checked属性来表示开关的状态。当aria-checked为true时，滑块向右移动，背景色变为绿色。

Custom State 和 Transitions 的优势

• 更好的可读性和可维护性: 将状态逻辑放在 CSS 中可以使代码更易于理解和维护。
• 更简洁的代码: 避免了使用 JavaScript 来操作类名，减少了代码量。
• 更好的性能: 在某些情况下，CSS Transitions 可能比 JavaScript 动画更高效。

Custom State 和 Transitions 的局限性

• 兼容性: Custom State 是一个相对较新的特性，在一些旧版本的浏览器中可能不支持。
• 复杂的状态管理: 对于非常复杂的状态管理，可能仍然需要借助 JavaScript。
• 需要辅助属性：Custom State 实际上依赖于 HTML 属性（例如 aria-*）来触发状态变化，这增加了一定的复杂性。

表格总结

特性	描述	优点	缺点
Custom State	允许定义自定义伪类，根据非标准条件改变元素样式。	简洁代码，可读性高，状态管理更集中。	依赖 HTML 属性，兼容性问题，复杂状态可能需要 JavaScript。
CSS Transitions	创建平滑动画效果，让元素属性值在一段时间内平滑过渡到另一个值。	简单易用，性能优化，提供多种过渡效果。	功能相对简单，无法控制复杂的动画序列，需要事件触发。
结合使用	使用 Custom State 触发状态变化，使用 CSS Transitions 实现动画效果。	增强用户体验，简化交互逻辑，提高代码可维护性。	需要谨慎设计状态和动画，避免过度使用导致性能问题。

最后，来个彩蛋！

其实，Custom State不仅仅可以和Transitions结合使用，还可以和Animations、CSS变量等其他CSS特性一起玩耍，创造出更多意想不到的效果。只要你脑洞够大，就能玩出新花样！

好了，今天的讲座就到这里。希望大家能够掌握Custom State和Transitions的使用方法，并在实际项目中灵活运用，打造出更炫酷、更流畅的网页交互体验。

感谢各位的观看，咱们下期再见！