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

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>

Answer 2

我很肯定按钮不需要javascript。

这是html和css中的高级框架： https://jsfiddle.net/gsvcaLrt/1/

button {
  background-color: red;
  border: none;
  padding: 1rem;
  overflow: hidden;
  position: relative;
}
.arrow {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transform: translateX(-30px);
  transition: 0.4s;
}
button:hover .arrow {
  visibility: visible;
  opacity: 1;
  transform: translateX(0px);
}

.text {
  visibility: visible;
  opacity: 1;
  transition: 0.4s;
  display: inline-block;
}
/* hide button on hover */
button:hover .text {
  visibility: hidden;
  opacity: 0;
  transform: translateX(30px);
}

<button>
  <span class="arrow">--></span>
  <span class="text">Hello</span>
</button>

您可以使用css为动画序列的不同部分添加更多细节。

Answer 3

如果你想要一个简单的解决方案，我建议只使用css transition，除了用javascript更改一个类以使用不同的动画来淡入淡出。

采取以下结构：

<a class="promo__button exit">
  <span class="arrowleft">
     <span>*the arrow that comes from the left*</span>
  </span>
  <span class="message">
     <span>*the text*</span>
  </span>
  <span class="arrowleft">
     <span>*the arrow that disappears to the right*</span>
  </span>
</a>

然后在css中你可以拥有这6个选择器：

.promo__button .message span {
  //the css for the text when it is visible
}

.promo__button:hover .message span {
  //the aditional css for the text when it is faded out
}

.promo__button .arrowleft span {
  //the css for the arrow before it came in from the left (invisible)
}

.promo__button:hover .arrowleft span {
  //the aditional css to make the arrow visible 
}

.promo__button .arrowright span {
  //the css for the arrow after it went away to the right side
}

.promo__button:hover .arrowright span {
  //the aditional css to make the arrow visible 
}

现在为从正常更改为悬停

的所有值添加.promo__button * * { transition: left 0.2s, opacity, 0.2s}

使用两个类来隐藏不需要的箭头动画：

.promo__button.enter .arrowright {display:none}
.promo__button.exit .arrowleft {display:none}

并使用javascript切换进入/退出onmouseenter

Answer 4

这是我的第一次传球。我试图将额外的标记保持在最低限度;唯一的补充是包装文本的跨度。箭头是通过pseudo elements创建的。在我看来，它是纯粹的装饰性的，如果用其他元素构造的话，它不会是语义的。

<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版本更好，更少跳跃，但它很容易调整。

如果您有任何其他问题，请与我们联系。这是一个有趣的小型演示版。

Answer 5

我知道为时已晚，但可能会很有趣。我曾经使用过css only动画。在使用伪类之前。

＆＃13;

＆＃13;

body {
  font-family: "Helvetica Neue", sans-serif;
  background: #f8f8f8;
}

.promo {
  color: #fff;
  text-align: center;
}

.promo__button {
  border: 1px solid #fff;
  display: inline-block;
  position: relative;
  margin-top: 1.5em;
  font-size: 24px;
  padding: 20px 50px;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .025em;
  text-align: center;
  color: #fff;
  background: #E21710;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
  
}

.promo__button:after {
  content: '';
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.text {
  transform: matrix(1, 0, 0, 1, 0, 0);
  display: block;
  transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translate(-300%, -50%);
  width: 80px;
  height: 1px;
  background: #E21710;
  display: inline-block;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.arrow:after,
.arrow:before {
  content: '';
  position: absolute;
  right: -3px;
  display: block;
  width: 20px;
  height: 1px;
  background: #E21710;
  z-index: 2;
}

.arrow:after {
  top: 7px;
  transform: rotate(-45deg);
}

.arrow:before {
  transform: rotate(45deg);
  top: -7px;
}

.promo__button:hover .text {
  transform: translateX(200%);
}

.promo__button:hover .arrow {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, -50%);
}
.promo__button:hover {
	box-shadow: 0 0 37px 10px rgba(0, 0, 0, 0.02); 
}
.promo__button:hover:after {
  transform: scaleY(1);
}

＆＃13;

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

</div>

＆＃13;

＆＃13;

＆＃13;