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

您无法通过不同的属性进行转换（right→ left ）仅right→right或 left → left

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

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

的假冒位置

使用left:

calc(100% - 20px);

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

（display: table;或其他一些方式可以帮助保持元素宽度）
现在元素左边缘位于距右窗口边界所需的20px处，然后将其拉回到整个使用中transform: translateX(-100%);

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

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

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

示例

＆＃13;
＆＃13;
$("#right, #right2").on("click", function () { $(this).toggleClass("active"); });
＆＃13;
#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%); }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

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

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

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>

Answer 3

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

我确信有更好的方法。：）

从右向左过渡

3 个答案: