关于javascript：从右向左过渡

Transitioning from right to left

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

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

https://jsfiddle.net/h12wrm1n/

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$("#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
}
This is some text
This is some text

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

相关讨论

不能通过不同的属性过渡(right→left)
仅right→right或left→left

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

最初将元素设置为20px

的假正确位置

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

1 2	+-----------------------------------+ \| ##\|#############

(display: table;或其他某种方式可以帮助保持元素宽度)

现在，元素Left edge在右窗口边框的期望20px处，要完全将其拉回，请使用transform: translateX(-100%);

1 2	+-----------------------------------+ \| ############### \|

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

1 2	+-----------------------------------+ \| ############### \|

示例

1
2
3

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

#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%);
}

1
2
3