从右向左过渡答案

【问题标题】：Transitioning from right to left从右向左过渡
【发布时间】：2016-10-26 14:28:31
【问题描述】：

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

我尝试过转换，但是当我从右到左时它停止工作。我写了一个简单的 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>

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

【问题讨论】：

这个问题的重复 - stackoverflow.com/questions/8210560/…
@FrancisStalin 不，不是。

标签： javascript html css

【解决方案1】：

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

详情请参阅 sn-p。悬停在身体上将触发变换。我在容器上设置了颜色，以便更容易看到正在发生的事情

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>

【讨论】：

用这种方法，我必须知道body的宽度吗？我希望在响应式网站上实现这一点。

【解决方案2】：

您不能通过不同的属性进行转换 (right→left)
只有right→right 或left→left

因此，您的第二个元素应仅通过 left 属性进行转换。

首先将您的元素设置为20px 的假右位置

使用calc(100% - 20px); 设置left:

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

（display: table; 或其他方式可以帮助保持元素宽度）
现在元素左边缘距离右窗口边框所需的 20 像素，将其全部拉回使用transform: translateX(-100%);

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

您现在可以同时将transition 转至left: 20px; 和transform:translateX(0%);

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

示例

$("#right, #right2").on("click", function () {
    $(this).toggleClass("active");
});

#right, #right2{
  position: absolute;
  background: #f0f;
  transition: 0.5s;
}

#right       {right: 20px; }
#right.active{right: 200px;}


#right2{
  display: table;
  top: 50px;
  left: calc(100% - 20px);
  transform: translateX(-100%);
}
#right2.active{
  left: 20px;
  transform: translateX(0%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right">click to animate right200px</div>
<div id="right2">click to animate left20px (some long text here)</div>

【讨论】：

谢谢罗科。您的解决方案在我实施后有效。出于这个原因，我将其标记为正确。但是，我有一个问题，那就是使用 calc。从caniuse.com/#feat=calc 看来，它似乎支持 IE 11 及更高版本。我的网站支持 IE 9 及更高版本。是否有其他方法可以实现这一点并保持对 IE 9 及更高版本的支持？
@Bagzli 我在 IE11 中测试了我的代码并意识到 IE 对我不利 :) 不，不会工作。最好用JS的方案……（后面我会加例子）
好吧，我现在撤回了正确的答案，因为这不能完全发挥作用。我希望避免使用 Javascript 来控制定位。
我正在考虑如果我使用左但以某种方式控制宽度的想法。所以我的包装器 div 可以位于右侧，文本位于左侧：0。然后单击时宽度会增加，从而允许向左过渡。但我不确定如何强制宽度与其内容相反，而不是 100%
@Bagzli 遗憾的是，您只能将宽度从某个固定值过渡到另一个固定值。 “自动”->“100%”将不起作用。但是您可以使用max-width 进行转换

【解决方案3】：

一种可能的方法是计算文本的宽度，然后从设备的宽度中减去它$(window).width() 然后动画到从左 0 到左的绝对位置 = $(window).width() - $(object).outterWidth()。

我相信有更好的方法。 :)

【讨论】：