为什么我不能让这个简单的 CSS 转换工作？

Question

我正在尝试学习和练习 CSS 转换，但我不知道为什么我不能让这个div class=text转换工作。

 const menuToggle = document.querySelector('.toggle') const showCase = document.querySelector('.showcase') const text = document.querySelector('.text') menuToggle.addEventListener('click', () => { menuToggle.classList.toggle('active') showCase.classList.toggle('active') text.classList.toggle('active') })

 .text { position: absolute; z-index: 6; transition-duration: 0.9s; transition-timing-function: ease; }.text.active { left: 950px; }

 <div class="text"> <h2>This</h2> <h3>Transition</h3> <p> Lorem </p> <a href="#">Hover</a> </div>

这是代码笔，请查看完整图片https://codepen.io/Code_Blues/pen/vYgGeXQ

当单击menu toggle时，我正在尝试将div class=text缓动转换为右侧，但它似乎不起作用。

谁能帮助并告诉我我似乎做错了什么？ 我将不胜感激。

非常感谢。

Answer 1

一种可能的解决方案是使用 transform: translate 函数。

例如，尝试类似的方法，而不是 current.text.active class。

.text.active{ 转换： translateX(400px) }

Answer 2

只需简单地添加left: 100px; 到.text 。

. . .

.text {
  position: absolute;
  z-index: 6;
  transition-duration: 0.9s;
  transition-timing-function: ease;
  left: 100px;
}

.text.active {
  left: 950px;
}

. . .

在 codepen 上检查它

---

您需要提供带有初始 position 的.text 。 现在，如果您要添加left: 0; 它将从 window 的完整启动开始。

总体而言，您在100px section添加了.showcase像素的padding 。 所以我们将添加 add left: 100px; 使文本与其他元素对齐。

---

left: 0; ：

left: 100px; ：

Answer 3

您可以为高度等过渡属性定义不同的值。

.text{
  position: absolute;
  z-index: 6;
  height: 300px;
  transition-duration: 2s;
  transition-timing-function: ease;
  
}

.text.active{
  height: 10px;
  left:950px;
}