我制作了一個帶有過渡的簡單文本，當我將其懸停在 CSS 中時，它會從左到右出現。
如代碼片段所示，我的代碼非常簡單。
所以當然，當我移開滑鼠游標時，它會朝另一個方向移動，文本從右到左消失。但是我希望它從左到右消失，然后重置，這樣它就可以從左到右再次出現，這就是我被卡住的地方。
你會用什么方法來獲得這樣的效果？
謝謝！
.text{
transition: max-width 700ms linear;
max-width: 0%;
overflow: hidden;
white-space: nowrap;
}
.container:hover .text{
max-width: 100%;
}
.container{
padding: 10px 0 10px 0;
width: fit-content;
}<div class="container">
<div class="text">THIS IS MY TEXT</div>
</div>uj5u.com熱心網友回復：
我設法做到了，感謝 A Haworth 為我指明了正確的方向。我現在需要檢索實際的剪輯路徑值，這樣當滑鼠在影片結束前沒有結束時，它不會像這樣“跳躍”。我想如果可能的話，我會在這里需要一些 JS。
.text{
animation: out linear 700ms forwards;
}
.container:hover .text{
animation: in linear 700ms;
}
.container{
padding: 10px 0 10px 0;
width: fit-content;
animation: reveal 700ms linear;
}
@keyframes in {
0% {
clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}
100% {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
}
@keyframes out {
0% {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
100% {
clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 100% 100%);
}
}
@keyframes reveal {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container">
<div class="text">THIS IS MY TEXT</div>
</div>uj5u.com熱心網友回復：
<p class="text">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Saepe, praesentium.</p>
.text{
transition: max-width 700ms linear;
opacity: 0;
height: 20px;
overflow: hidden;
max-width: 0px;
}
.text:hover{
opacity: 1;
max-width: 100%;
}
uj5u.com熱心網友回復：
您可以為此使用 CSS 影片 - 在非懸停狀態下，文本向左移動：100% 位置，在懸停狀態下，它從 -100% 位置移動到 0 位置。
如果您使用過渡（而不是設定左側位置）執行此操作，則容器將保持子文本的寬度。
這種方法的缺點是第一次，即加載，可以看到文本是從左到右移動的。為了解決這個問題，這個代碼片段有一點 hack，容器在頁面生命的前 700 毫秒內具有不透明度 0，然后可見。
.text {
display: inline-block;
width: fit-content;
animation: out linear 700ms forwards;
transform: translateX(100%);
}
@keyframes out {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(100%);
}
}
.container:hover .text {
transform: translateX(0%);
animation: in linear 700ms;
}
@keyframes in {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
.container {
padding: 10px 0 10px 0;
width: fit-content;
rheight: fit-content;
animation: reveal 700ms linear;
overflow: hidden;
}
@keyframes reveal {
0%,
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}<div class="container">
<div class="text">THIS IS MY TEXT</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/537828.html