javascript - 从右向左过渡

Question

我有一个网站，我需要将一些文本从屏幕右侧移动到左侧。文本的长度不断变化，所以我不能硬编码宽度来实现我想要的。

我尝试过过渡，但是当我从右到左时它停止工作。我写了一个简单的 jsfiddle 来演示我的问题以及我是如何尝试解决它的。第一个 div 显示了它应该如何工作，但是我需要文本左对齐而不是右对齐(text-align 属性不适用于我的完整代码)。第二个 div 显示了当我向左过渡时发生的实际结果。

https://jsfiddle.net/h12wrm1n/

$("#right").on("click", function () {
    $("#right").toggleClass("active");
});
$("#right2").on("click", function () {
    $("#right2").toggleClass("active");
});
.right, .right2{
  width: 300px;
  position: absolute;
  right: 20px;
  transition: .5s
}
.right2{
  top: 100px;
}
.right.active{
  right: 200px;
}
.right2.active{
  left: 20px
}
<div id="right" class="right">This is some text</div>
<div id="right2" class="right2">This is some text</div>

如果我不知道文本的宽度，如何让它从右向左过渡？另请记住，该页面是响应式的。

Answer 1

一种可能性是为带有文本的元素使用容器。并翻译容器和内部元素。

有关详细信息，请参阅代码段。悬停在 body ​​上会触发变换。我在容器上设置了一种颜色，以便更容易看到正在发生的事情

body {
  width: 300px;
  border: solid 1px red;
  margin: 30px;
}

.container {
  width: 100%;
  background-color: lightblue;
  transform: translateX(100%);
}


.test {
  display: inline-block;
  transform: translateX(-100%);
}

body:hover .container {
  transform: translateX(0%);
}

body:hover .test {
  transform: translateX(0%);
}

.container, .test {
  transition: transform 1s;
}

<div class="container">
<div class="test">Text</div>
</div>
<div class="container">
<div class="test">longer.............. text</div>
</div>