动态CSS动态文本

Question

我需要在悬停时为这个链接添加一个动画，我必须处理＆＃34; width＆＃34;链接词可以改变。有没有办法动态改变翻译动画的价值？

＆＃13;

＆＃13;

.link {
  text-decoration: none;
  padding-left: 15px;
  position: relative;
  transition: 1s;
  &:hover {
    padding-left: 0;
    .link--decoration {
      animation: in 1s ease both;
    }
  }
}

.link--decoration {
  animation: out 1s ease both;
  left: 0;
  position: absolute;
}

@keyframes in {
  to {
    transform: translate(calc(100% + 75px), 0);
  }
}

@keyframes out {
  from {
    transform: translate(calc(100% + 75px), 0);
  }
  to {
    transform: translate(0, 0);
  }
}

＆＃13;

<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Read Article</span></a></p>

<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Open Hours</span></a></p>

<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Open Localization</span></a></p>

＆＃13;

＆＃13;

＆＃13;

https://codepen.io/serrazina/pen/zzEaLE

Answer 1

我认为有两种方法可以解决这个问题。第一个使用left来动画装饰。像这样：

.link {
  text-decoration: none;
  padding-left: 15px;
  position: relative;
  transition: 1s;
}

.link:hover {
  padding-left: 0;
}

.link:hover .link--decoration {
  animation: in 1s ease both;
}

.link--decoration {
  animation: out 1s ease both;
  left: 0;
  position: absolute;
}

@keyframes in {
  to {
    left: calc(100% + 5px);
  }
}

@keyframes out {
  from {
    left: calc(100% + 5px);
  }
  to {
    left: 0;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Read Article</span></a></p>

<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Open Hours</span></a></p>

<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Open Localization</span></a></p>

第二种方法使用transform来利用硬件加速。此方法与您的方法之间的区别是在装饰中添加了width: 100%，因为translate基于元素的宽度。在您的示例中，意味着transform: translateX(100%)是装饰元素宽度的100％，宽度约为20px。在下面的演示中，我将元素100％作为其父元素的宽度，因此transform: translateX(100%)将其移动到父元素的右侧。

.link {
  text-decoration: none;
  padding-left: 15px;
  position: relative;
  transition: 1s;
}

.link:hover {
  padding-left: 0;
}

.link:hover .link--decoration {
  animation: in 1s ease both;
}

.link--decoration {
  animation: out 1s ease both;
  left: 0;
  width: 100%;
  position: absolute;
}

@keyframes in {
  to {
    transform: translateX(calc(100% + 5px));
  }
}

@keyframes out {
  from {
    transform: translateX(calc(100% + 5px));
  }
  to {
    transform: translateX(0);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Read Article</span></a></p>

<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Open Hours</span></a></p>

<p><a href="#" class="link"><span class="link--decoration">&dash;</span><span class="link--text">Open Localization</span></a></p>