Javascript 从右向左过渡

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

我曾尝试过转换，但当我从右向左转换时，转换就停止了。我已经编写了一个简单的JSFIDLE来演示我的问题以及我如何尝试解决它。第一个div显示了它应该如何工作，但是我需要文本向左对齐而不是向右对齐（text align属性在我的完整代码中不起作用）。第二个div向您显示了当我转换到左侧时发生的实际结果

$（“#右”）。在（“单击”上，函数（）{
$（“#右”）.toggleClass（“活动”）；
});
$（“#right2”）。在（“单击”上，函数（）{
$（“#right2”）.toggleClass（“活动”）；
});
.对，对{
宽度：300px；
位置：绝对位置；
右：20px；
转换：.5s
}
.对2{
顶部：100px；
}
.对，活跃{
右：200px；
}
.right2.active{
左：20px
}
这是一些文本
这是一些文本

---

如果我不知道文本的宽度，如何让它从右向左转换？另外，请记住页面是有响应的。

一种可能的方法是计算文本的宽度，并从设备的宽度中减去它。

$（窗口）。宽度（）
然后设置动画，从左到左定位绝对值=
$（窗口）.width（）-$（对象）.outterWidth（）

不过，我相信有更好的办法。：）
 您不能通过不同的属性进行转换（
右侧
→<代码>左侧

）
仅

右侧

→<代码>右侧或

左侧

→<代码>左侧

因此，第二个元素应该单独通过

left

属性进行转换

将元素初始设置为

20px的伪右位置

设置

left:

使用

calc（100%-20px）

（

display:table；

或其他方法有助于保持元素宽度）

现在元素左边缘与右窗口边框的距离达到了所需的20px，要将其整体向后拉，请使用

transform:translateX（-100%）

您现在可以

转换到
左：20px和
转换：translateX（0%）同时

示例

$（“#右，#右2”）。在（“单击”，函数（）{
$（此）.toggleClass（“活动”）；
});
#对#对2{
位置：绝对位置；
背景：#f0f；
过渡：0.5s；
}
#右{右：20px；}
#right.active{right:200px；}
#对2{
显示：表格；
顶部：50px；
左：计算（100%-20px）；
转化：translateX（-100%）；
}
#对2.主动{
左：20px；
转化：translateX（0%）；
}

单击以设置right200px的动画
单击以设置left20px的动画（此处有一些长文本）
一种可能性是为包含文本的元素使用容器。并转换容器和内部元素

有关详细信息，请参见代码段。在主体上悬停将触发变换。我在容器上设置了一种颜色，以便更容易看到发生了什么


正文{
宽度：300px；
边框：实心1px红色；
利润率：30像素；
}
.集装箱{
宽度：100%；
背景颜色：浅蓝色；
转化：translateX（100%）；
}
.测试{
显示：内联块；
转化：translateX（-100%）；
}
主体：悬停。容器{
转化：translateX（0%）；
}
身体：悬停。测试{
转化：translateX（0%）；
}
.容器，.测试{
转变：转变1s；
}

正文
比较长的文本
这个问题的副本-@FrancisStalin不，不是。谢谢Roko。我实施后，你的解决方案奏效了。因此，我已将此标记为正确。然而，我有一个担忧，那就是使用calc。从它看来，IE 11及以上版本似乎是受支持的。我的网站支持IE9及以上。有没有其他方法来实现这一点并保持对IE9及以上的支持？@Bagzli我在IE11中测试了我的代码，并意识到IE对我不利：）不，不会起作用。您最好使用JS解决方案。。。（稍后我将添加一个示例）好的，我现在收回了正确的答案，因为这并不完全有效。我希望避免使用Javascript来控制定位。我的想法是，如果我使用left，但以某种方式控制宽度，会怎么样。因此，我的包装器div可以定位在右侧，文本可以定位在左侧：0。然后，在单击时，宽度将增加，从而允许向左的过渡工作。但我不知道如何强制宽度与100%@Bagzli相反，很遗憾，您只能将宽度从某个固定值转换为另一个固定值。“自动”->“100%”将不起作用。但是你能做的就是使用
max width
进行转换。使用这种方法，我必须知道身体的宽度吗？我希望在一个响应迅速的网站上实现这一点。
$("#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>

    +-----------------------------------+
    |                                 ##|#############

    +-----------------------------------+
    |                  ###############  |

    +-----------------------------------+
    |  ###############                  |