如何创建动画翻转箭头动画

Question

我想制作一个翻转按钮,如https://www.plantflags.com/en/

这个网站按钮翻转效果.示例:如果您在按钮上翻转,则文本应淡出,箭头应从左侧开始并创建.在推出之后,箭头向右侧逐渐淡出,文本再次淡入.

示例:如果您访问该网站并翻转该按钮,您就会明白.

我已经研究了他们的代码,CSS我可以理解,但是有一个我无法理解的JS问题.

你能弄清楚我怎么能像这种类型的翻转效果一样.

有像html的代码

<a href="#" class="promo__button" data-module="modules/AnimatedArrowButton" data-contact-button>Tell me more</a>

有数据属性 modules/AnimatedArrowButton实际上调用js并创建更多跨度

没有效果的演示https://jsfiddle.net/cyber007/78pshojd/

Answer 1

您可以混合使用css和jQuery来实现此效果(因为您使用jQuery标记了您的问题).

var timeout = null;
var transitionEnd = true;

jQuery('.line').on("mouseenter", function() {
  if (!transitionEnd)
    return;

  _this = jQuery(this);

  _this.addClass("hide-text");

  timeout = setTimeout(function() {
    _this.addClass("in");
  }, 300);

  transitionEnd = false;
}).on("mouseleave", function() {
  clearTimeout(timeout);

  jQuery(this).addClass("out").one("transitionend", function() {
    transitionEnd = true;
    jQuery(this).removeClass("hide-text out in");
  });


});

.line {
  background-color: red;
  border: 1px solid;
  border-radius: 5px;
  color: white;
  cursor: pointer;
  display: block;
  float: left;
  font-size: 25px;
  height: 70px;
  line-height: 70px;
  margin: 30px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 200px;
}
.line::after {
  content: " ";
  border-top: 1px solid white;
  position: absolute;
  top: 50%;
  right: 100%;
  left: -150%;
  transition: left 0.5s, right 0.3s;
  opacity: 0;
}
.line::before {
  border-right: 1px solid white;
  border-top: 1px solid white;
  content: " ";
  height: 10px;
  position: absolute;
  right: 20%;
  top: calc(50% - 5px);
  transform: rotate(45deg) scale(0.2);
  transition: all 0.5s ease 0s;
  width: 10px;
  opacity: 0;
}
.line span,
.line.out span {
  opacity: 1;
  transition: 0.5s;
  transition-delay: 0.1s;
}
.line.hide-text span {
  opacity: 0;
}
.line.in::after {
  left: 20%;
  right: 20%;
  opacity: 1;
}
.line.in::before {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}
.line.out::before {
  right: -100%;
  transition-delay: 0s;
}
.line.out::after {
  left: 100%;
  right: -150%;
  transition: left 0.3s, right 0.3s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='line'>
  <span class='text'>Button Text</span>
</div>

Answer 2

这是我的第一遍。我试图将额外的标记保持在最低限度；唯一的补充是包裹文本的跨度。箭头是通过伪元素创建的。在我看来，它纯粹是装饰性的，如果由其他元素构建而成，则不会具有语义。

<a href="#" class="promo__button">
  <span>Tell me more</span>
</a>

https://jsfiddle.net/6ewvbq75/

我尽力保持代码整洁并添加了注释。一些重要的部分：

1. 您会注意到部分动画在页面加载时播放。这是一个已知问题，您可以做的是在悬停时应用动画类。这看起来同样好，但避免了页面加载时这些按钮的尴尬动画： https: //jsfiddle.net/b5sc9xrp/

2. 所有动画最后都存储在关键帧中。on hover或on mouse over动画与分配一起应用，例如.button:hover span指令。on mouse out在标准声明中分配，.button span这有点违反直觉，因此值得一提。:un-hover毕竟没有。

3. forwards动画赋值中的关键字意味着动画只会向前播放并在那里停止。这是关键。例如，当我们向右滑动文本并将其淡出时，我们希望它保留在最后一个关键帧上。如果没有forwards动画，则会跳回到关键帧 1。

4. 我将箭头元素设置为 2 像素宽度。我认为它看起来比 1px 版本更好，也更不那么跳跃，但这是一个足够简单的调整。

如果您还有其他问题，请告诉我。这是一个有趣的小演示。