如何使动画的宽度从0到100%从右到左?

Question

我希望从右到左动画一个div。我知道如何从左到右，但我不知道如何从右到左。

下面是从左到右的动画代码::

.wrapper {
border: 1px solid black;
}
.contents {
background: #c3c;
overflow: hidden;
white-space: nowrap;
display: inline-block;
width: 100%;
}
.wrapper:hover .contents {
transition: width 1s ease-in-out;
width: 0%;
}

<div class="wrapper">
<div class="contents">These are the contents of this div</div>
</div>

谁能给我指一下正确的方向?

Answer 1

考虑clip-path，您可以轻松地设置任何方向

.wrapper {
border: 1px solid black;
}
.contents {
background: #c3c;
overflow: hidden;
display: inline-block;
width:100%;
transition: clip-path 1s ease-in-out;
clip-path:inset(0);
}
.wrapper:hover .contents {
clip-path:inset(0 100% 0 0); /* top "right" bottom left*/
}
.wrapper.alt:hover .contents {
clip-path:inset(0 0 0 100%); /* top right bottom "left"*/
}

<div class="wrapper">
<div class="contents">These are the contents of this div</div>
</div>
<div class="wrapper alt">
<div class="contents">These are the contents of this div</div>
</div>

或者仅仅依靠text-align:

.wrapper {
border: 1px solid black;
}
.wrapper.alt {
text-align:right;
}
.contents {
background: #c3c;
overflow: hidden;
white-space: nowrap;
display: inline-block;
width: 100%;
text-align:left;
transition: width 1s ease-in-out;
}
.wrapper:hover .contents {
width: 0%;
}

<div class="wrapper">
<div class="contents">These are the contents of this div</div>
</div>
<div class="wrapper alt">
<div class="contents">These are the contents of this div</div>
</div>