CSS动画控制：Sibling Selector与:has()伪类应用详解

本文旨在解决CSS动画控制中，当控制元素（如按钮）位于目标元素之后时，使用Sibling Selector失效的问题。通过分析Sibling Selector的局限性，并引入`:has()`伪类，提供了一种无需JavaScript即可实现动画控制的解决方案，并附带详细代码示例和注意事项。

在使用CSS进行动画控制时，我们经常需要通过某些交互（例如按钮点击）来触发或暂停动画。 Sibling Selector (~) 是一种常用的方法，但它存在一定的局限性。 本文将深入探讨 Sibling Selector 的工作原理及其限制，并介绍如何使用 :has() 伪类来解决控制元素位于目标元素之后时动画无法生效的问题。

Sibling Selector (~) 的局限性

Sibling Selector (~) 允许你选择同一父元素下，位于指定元素之后的所有兄弟元素。 这意味着，如果你的控制元素（例如按钮）位于需要控制动画的元素之前，那么 Sibling Selector 可以正常工作。然而，如果控制元素位于目标元素之后，则 Sibling Selector 将无法生效。

以下面的HTML结构为例，展示了Sibling Selector失效的场景：

立即学习“前端免费学习笔记（深入）”；

<div class="container">
  <div class="content"></div>
</div>
<button class="start">Start</button>
<button class="stop">Stop</button>

在这种情况下，即使你使用如下的CSS规则：

.start:focus ~ .container .content {
  animation-play-state: running;
}

.stop:focus ~ .container .content {
  animation-play-state: paused;
}

点击按钮也无法控制 .content 元素的动画，因为 .start 和 .stop 按钮位于 .container 元素之后。

使用 :has() 伪类解决问题

:has() 伪类允许你选择包含特定元素的父元素。 通过结合 :has() 伪类和子选择器 (>)，我们可以轻松地解决控制元素位于目标元素之后的问题。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

首先，我们需要将目标元素和控制元素包裹在一个父元素中：

<div class="wrapper">
  <div class="container">
    <div class="content"></div>
  </div>
  <button class="start">Start</button>
  <button class="stop">Stop</button>
</div>

然后，使用 :has() 伪类来选择包含 .start:focus 或 .stop:focus 的 .wrapper 元素，并使用子选择器 (>) 来定位到 .container .content 元素，从而控制动画：

.wrapper:has(.start:focus) > .container .content {
  animation-play-state: running;
}

.wrapper:has(.stop:focus) > .container .content {
  animation-play-state: paused;
}

完整的CSS代码如下：

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
}

.container {
  margin: 50px auto;
  width: 500px;
  height: 500px;
  border: 1px solid black;
}

.content {
  width: 100px;
  height: 150px;
  background-color: aqua;
  animation: animasyon 1.5s linear alternate infinite;
}

.wrapper:has(.start:focus) > .container .content {
  animation-play-state: running;
}

.wrapper:has(.stop:focus) > .container .content {
  animation-play-state: paused;
}

@keyframes animasyon {
  from {
    width: 100px;
  }
  to {
    width: 500px;
  }
}

通过这种方式，无论控制元素位于目标元素之前还是之后，都可以使用纯CSS实现动画的控制。

总结与注意事项

• Sibling Selector (~) 的局限性： 只能选择位于指定元素之后的兄弟元素。
• :has() 伪类的优势： 可以选择包含特定元素的父元素，从而解决控制元素位置带来的问题。
• 代码结构： 为了使用 :has() 伪类，需要将目标元素和控制元素包裹在一个父元素中。
• 兼容性： 请注意 :has() 伪类的兼容性。 部分旧版本浏览器可能不支持该特性。 在使用前请务必进行兼容性测试。

通过理解 Sibling Selector 的局限性并掌握 :has() 伪类的用法，我们可以更灵活地使用 CSS 控制动画，避免使用 JavaScript，从而简化代码并提高性能。

以上就是CSS动画控制：Sibling Selector与:has()伪类应用详解的详细内容，更多请关注php中文网其它相关文章！