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

Posted 2023-03-05

【中文标题】如何创建动画翻转箭头动画

【英文标题】：How to create animated rollover arrow animation

【发布时间】：2017-05-23 14:59:48

【问题描述】：

我想做一个类似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/

【问题讨论】：

基于检查他们的 JS 动画似乎是用 TweenLite 完成的。它很光滑。 greensock.com/tweenlite

【参考方案1】：

如果你想要一个简单的解决方案，我建议只使用 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

【参考方案2】：

这是我的第一关。我试图将额外的标记保持在最低限度；唯一的补充是一个环绕文本的跨度。箭头是通过pseudo elements 创建的。在我看来，它纯粹是装饰性的，如果由其他元素构成，就不会是语义化的。

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

https://jsfiddle.net/6ewvbq75/

我尽我所能保持代码的整洁和注释。几个重要的部分：

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

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

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

我将箭头元素设为 2 像素宽。我认为它看起来比 1px 版本更好，也没有那么跳跃，但它很容易调整。

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

【讨论】：

哇。伟大的。我也在努力。与示例相同的效果，擦除类型。如果您看到该网站，那么您可以理解我的意思。那个箭头动画非常流畅..让我们一起尝试...无论如何感谢您的大力支持

不客气，注意我的解决方案只使用css，不需要js/jquery

【参考方案3】：

您可以混合使用 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>

【讨论】：

酷.. 非常感谢您的支持。但我认为如果这将工作锚标签那么会更好，所以可以在任何有锚的地方使用

【参考方案4】：

我很肯定该按钮不需要 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 为动画序列的不同部分添加更多细节。

【参考方案5】：

我知道为时已晚，但它可能会很有趣。我在伪类之后和之前使用了仅 css 的动画。

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);

<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>

.