主页 / coding / 问题 / 79469872
Accepted
Symtox
Asked: 2025-02-26 21:15:29 +0800 CST

锚定翻译元素

  • 772

我正在尝试使用 CSS 锚点（我知道它还在试验阶段，但仍在进行中）。我尝试将一个按钮锚定在侧边栏的右侧。侧边栏在关闭时会平移到屏幕外，在打开时会返回。我希望锚定在侧边栏上的按钮能够跟随侧边栏的走向，但我无法让它跟随平移。

document.querySelector('button')
  .addEventListener('click', () => {
    document.querySelector('aside').setAttribute("aria-expanded", "true");
  }
)
div {
  background: red;
  height: 200px;
}

aside {
  width: 30px;
  background: green;
  position: absolute;
  right: 0;
  inset-block: 0;
  transition: all 1s;
  transform: translateX(100%);
  anchor-name: --anchor-name;
}

aside[aria-expanded="true"] {
  transform: translateX(0);
}

button {
  position: absolute;
  position-anchor: --anchor-name;
  right: anchor(--anchor-name left);
  top: 50%;
  transform: translateY(-50%);
}

body { margin: 0; }
<div>
  <aside></aside>
  <button >Expand</button>
</div>

我找不到任何描述该行为的资源，有没有什么办法可以让它工作？编辑：我正在使用 Chrome 130.0.6723.116

css

1 个回答

  1. Best Answer

    这是因为您正在使用transform: translate on the sidebar- 这不会改变元素的位置或尺寸，就其他元素而言 - 从它们的角度来看，元素“仍然”在原来的位置。

    一旦您删除它，并从转到right: -30px，right: 0您就会注意到差异。

    • 1

相关问题