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

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并创建更多span

演示无效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>