Question

我试图在向上和向下箭头上创建一个类似的效果，如下图所示，但因为我的javascript / jquery技能很低而被卡在中途。

我无法弄清楚如何使文字显示，然后在点击时逐渐消失颜色。

Here's a link to the fiddle just in case SO code snippet doesn't work

＆＃13;

$("span").click(function() {
    $("span").css("color", "grey");
    $(this).css("color", "red");
  });

＆＃13;

ul > li{
  list-style:none;
} 
span {
    cursor: pointer;
}

.fa {
    font-size: 55px;
    text-indent: 200px;
    margin-bottom: 20px;
    margin-top:30px;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
    <li><span id='select1'><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span></li>
    <li><span id='select2'><i class="fa fa-long-arrow-down" aria-hidden="true"></i></span></li>
    </ul>

＆＃13;

到目前为止，没有一个答案对我有用，所以我要求更多帮助。

我在reddit看到了这种效果，我已经尝试了很多次并花了很多时间但却没有得到类似的效果。如果有人能帮助我理解并创造确切的效果，我真的很感激。

Answer 1

这是我的解决方案版本https://jsfiddle.net/hnk1vw6x/33/ 看下面的一些解释。

HTML

<div class="padding-container">
<span id="rating">0</span>
<a class="arrow fa fa-arrow-up" data-animation-text="Nice!" data-value="1"></a><br/>
<a class="arrow fa fa-arrow-down" data-animation-text="Troll" data-value="-1"></a>
</div>

CSS

.padding-container {
  width: 60px;
  margin: 100px;
}
#rating {
  float: right;
  font-size: 2.1em;
  width: auto;
}
a.arrow {
  display: inline-block;
  position: relative;
  cursor: pointer;
}
a.arrow:after {
  content: attr(data-animation-text);
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: auto;
  opacity: 0;
}
a.arrow.fa-arrow-up {
  color: #FF0000;
}
a.arrow.fa-arrow-down {
  color: #0000FF;
}
a.arrow.fa-arrow-up:after {
  bottom: 100%;
}
a.arrow.fa-arrow-down:after {
  top: 100%;
}
a.arrow.animate.fa-arrow-up:after {
  animation-name: slideup, bounce;
  animation-duration: 3s;
}
a.arrow.animate.fa-arrow-down:after {
  animation-name: slidedown, bounce;
  animation-duration: 3s;
}
@keyframes slideup {
  from {
    bottom: 100%;
    opacity: 1;
  }
  to {
    bottom: 300%;
    opacity: 0;
  }
}
@keyframes slidedown {
  from {
    top: 100%;
    opacity: 1;
  }
  to {
    top: 300%;
    opacity: 0;
  }
}
@keyframes bounce {
  from {
    font-size: 1em;
  }
  3% {
    font-size: 1.25em;
  }
  6% {
    font-size: 0.75em;
  }
  9% {
    font-size: 1em;
  }
}

的JavaScript

function arrowAnimationEndHandler(e) {
  var arrow = e.target;
  if (typeof arrow === 'undefined') {
    return;
  }

  arrow.className = arrow.className.replace(/\banimate\b/,'');
}

function arrowClickHandler(e) {
  var arrow = e.target;
  if (typeof arrow === 'undefined') {
    return;
  }

  arrow.className = arrow.className.replace(/\banimate\b/,'');
  setTimeout(function () {
    arrow.className += ' animate';
  }, 0);

  ratingUpdateBusinessLogic(arrow);
}

function ratingUpdateBusinessLogic(arrow) {
  if (typeof ratingElement === 'undefined') {
    return;
  }

  var ratingDelta = parseInt(arrow.getAttribute('data-value'), 10);
  ratingElement.innerHTML = parseInt(ratingElement.innerHTML, 10) + ratingDelta;
}
var ratingElement = document.getElementById("rating");
var arrows = document.getElementsByClassName("arrow");

for (var i = 0; i < arrows.length; i++) {
  arrows[i].addEventListener("animationend", arrowAnimationEndHandler, false);
  arrows[i].addEventListener("click", arrowClickHandler, false);
}

现在解释一下：

问题非常复杂，作者要求提供一个完整的解决方案，而不是解释一个尚不清楚的方面。我决定给出答案，因为我可以勾勒出可能的软件设计步骤帮助别人解决另一个复杂问题。

在我看来，复杂任务的关键是能够将它们拆分成更小的，这反过来更容易接近。让我们尝试将此任务分成更小的部分：

我们需要绘制两个箭头和一个数字。
上下箭头应该有不同的颜色。
我们需要在它们旁边绘制箭头工具提示/标签。
我们需要为用户互动设置箭头工具提示/标签的动画。
我们需要在用户输入上应用我们的业务逻辑（更改评级）。

现在让我们尝试逐一解决这些小问题：

我们需要绘制两个箭头和一个数字。好吧，HTML是我们的朋友在这里和下面是一个简单的HTML代码。我正在使用font-awesome来绘制实际的箭头图标。
```
<div class="padding-container">
  <span id="rating">0</span>
  <a class="arrow fa fa-arrow-up"></a>
  <a class="arrow fa fa-arrow-down"></a>
</div>
```

我们希望我们的箭头在屏幕上以某种方式定位，让我们制作箭头内嵌块，并在它们之间添加换行符，同时添加一些CSS来排列：

    .padding-container {
      width: 60px;
      margin: 100px;
    }
    #rating {
      float: right;
      font-size: 2.1em;
      width: auto;
    }
    a.arrow {
      display: inline-block;
      cursor: pointer;
    }

我们的箭头应该有不同的颜色。再次琐碎的CSS在这里。颜色不是像gif那样100％，但这是制作屏幕截图并选择正确颜色的问题 - 你可以自己做。
```
a.arrow.fa-arrow-up {
  color: #FF0000;
}
a.arrow.fa-arrow-down {
  color: #0000FF;
}
```
我们需要在它们旁边绘制箭头工具提示/标签。好的，这开始很有趣。让我们使用:after伪元素来绘制我们的工具提示，因为这些工具提示是表示（而不是内容）的一部分，它们不需要反映在html结构中。我使用:after而不是:before，因为font-awesome使用before进行箭头图标渲染;）我们还使用绝对定位将它们相对于实际箭头放置。这给了我们以下的CSS：
```
a.arrow {
  position: relative;
}
a.arrow:after {
  content: attr(data-animation-text);
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: auto;
}
a.arrow.fa-arrow-up:after {
  bottom: 100%;
}
a.arrow.fa-arrow-down:after {
  top: 100%;
}
```
现在，我们的工具提示只是在箭头旁边呈现，我们可以通过html控制它们的内容，例如：用于翻译目的。工具提示也相对于箭头居中。

我们需要为用户互动设置箭头工具提示/标签的动画。我们可以通过javascript动画元素，我们也可以通过CSS来实现。通过CSS实现它是更有效的，所以除非我们需要支持真正的旧浏览器，否则我们坚持使用CSS。我们需要实现两个动画，一个是工具提示与提升/下降一起淡入，第二个是工具提示反弹。让我们来看看CSS提供的内容：

a.arrow:after {
  opacity: 0;
}
a.arrow.fa-arrow-up:after {
  animation-name: slideup, bounce;
  animation-duration: 3s;
}
a.arrow.fa-arrow-down:after {
  animation-name: slidedown, bounce;
  animation-duration: 3s;
}
@keyframes slideup {
  from {
    bottom: 100%;
    opacity: 1;
  }
  to {
    bottom: 300%;
    opacity: 0;
  }
}
@keyframes slidedown {
  from {
    top: 100%;
    opacity: 1;
  }
  to {
    top: 300%;
    opacity: 0;
  }
}
@keyframes bounce {
  from {
    font-size: 1em;
  }
  3% {
    font-size: 1.25em;
  }
  6% {
    font-size: 0.75em;
  }
  9% {
    font-size: 1em;
  }
}

现在我们在加载页面后直接看到一个漂亮的标签动画。到目前为止，所有这些都是在没有一行JavaScript的情况下完成的。但任务表明我们需要为用户互动制作动画。

好的，我们现在添加一些javascript。但在此之前我们需要触发动画的可能性，让我们使用CSS类触发它：animate，我们的CSS然后改变如

a.arrow.animate.fa-arrow-up:after {
  animation-name: slideup, bounce;
  animation-duration: 3s;
}
a.arrow.animate.fa-arrow-down:after {
  animation-name: slidedown, bounce;
  animation-duration: 3s;
}

注意添加了animate类。如果我们现在手动将类添加到HTML中 - 我们将再次看到动画。但是我们需要在用户点击时发生这种情况，这很容易：

function arrowClickHandler(e) {
  var arrow = e.target;

  arrow.className += ' animate';
}

var arrows = document.getElementsByClassName("arrow");
for (var i = 0; i < arrows.length; i++) {
  arrows[i].addEventListener("click", arrowClickHandler, false);
}

现在，如果我们加载页面并单击箭头 - 我们将看到动画，但只有一次。我们需要找到一种方法来重置它。让我们删除动画完成时的animate课程。

function arrowAnimationEndHandler(e) {
  var arrow = e.target;
  if (typeof arrow === 'undefined') {
    return;
  }

  arrow.className = arrow.className.replace(/\banimate\b/,'');
}

var arrows = document.getElementsByClassName("arrow");
for (var i = 0; i < arrows.length; i++) {
  arrows[i].addEventListener("animationend", arrowAnimationEndHandler, false);
}

现在，我们可以点击箭头并根据需要多次查看动画。但是有一个问题，如果它已经存在，我们就无法重启动画。为此，我们需要一个小技巧：

function arrowClickHandler(e) {
  var arrow = e.target;
  if (typeof arrow === 'undefined') {
    return;
  }

  arrow.className = arrow.className.replace(/\banimate\b/,'');
  setTimeout(function () {
    arrow.className += ' animate';
  }, 0);
}

只要我们远程animate类 - 我们给浏览器一个机会来执行它的代码并停止动画，然后我们再次添加animate类。

我们需要在用户输入上应用我们的业务逻辑（更改评级）。这里没有火箭科学，我们读取当前值并根据我们分配给箭头的值更新它：

function arrowClickHandler(e) {
  ...     
  ratingUpdateBusinessLogic(arrow);
}

function ratingUpdateBusinessLogic(arrow) {
  if (typeof ratingElement === 'undefined') {
    return;
  }

  var ratingDelta = parseInt(arrow.getAttribute('data-value'), 10);
  ratingElement.innerHTML = parseInt(ratingElement.innerHTML, 10) + ratingDelta;
}
var ratingElement = document.getElementById("rating");

更新： 使用glyphicons的解决方案需要将css / html类fa fa-arrow-up和fa fa-arrow-down替换为相应的glyphicon类，即：glyphicon glyphicon-arrow-up和glyphicon glyphicon-arrow-down。经过一番思考后，我还决定从库类中取消绑定自定义css并添加自定义arrow-up和arrow-down类以简化图标库替换：

<a class="arrow arrow-up glyphicon glyphicon-arrow-up" data-animation-text="Sick!" data-value="1"></a>
<a class="arrow arrow-down glyphicon glyphicon-arrow-down" data-animation-text="Suck!" data-value="-1"></a>

CSS

a.arrow.arrow-up {
  .
}
a.arrow.arrow-down {
  ...
}
a.arrow.arrow-up:after {
  ...
}
a.arrow.arrow-down:after {
  ...
}
a.arrow.animate.arrow-up:after {
  ...
}
a.arrow.animate.arrow-down:after {
  ...
}

Answer 2

您可以使用jquery animate来获得该效果。试试这个

修改为了确切的效果使用jquery缓动插件并给出

easeOutElastic缓动效果

$("#select1").click(function() { $(".nice").css("display","block"); $(".nice").animate({ top: -10, }, 500, "easeOutElastic", function() { // Animation complete. $(".nice").css({"opacity":"1", "top":"10px","display":"none"}); }); }); $("#select2").click(function(){ $(".troll").css("display","block"); $(".troll").animate({ top: 130, }, 500,"easeOutElastic", function(){ $(".troll").css({"opacity":"1", "top":"120px","display":"none"}); }); });

ul > li{ list-style:none; } span { cursor: pointer; } .fa { font-size: 55px; text-indent: 200px; margin-bottom: 20px; margin-top:30px; } .nice{ position:absolute; top:10px; text-indent :190px; display:none; } .troll{ position:absolute; top:120px; text-indent : 190px; display:none; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> <ul> <li> <p class="nice">Nice</p> <span id='select1'><i class="fa fa-long-arrow-up" aria-hidden="true"></i></span></li> <li><span id='select2'><i class="fa fa-long-arrow-down" aria-hidden="true"></i></span> <p class="troll">Troll</p> </li> </ul>

Answer 3

只需添加文本并在Jquery的fadeout和fadein属性的帮助下显示/隐藏它。 Check your updated fiddle

$("span").click(function() {
  if($(this).attr('id')=='select1')
    {
      $("#downText").fadeOut(300);
        $("#upText").fadeIn(300);      
    }
    else
    {
    $("#upText").fadeOut(300);
        $("#downText").fadeIn(300);
    }
    $("span").css("color", "grey");
    $(this).css("color", "red");
  });

$("fa").click(function(){
        $("fa").fadeTo("slow", 0.15);
});

Answer 4

添加一个setTimeout，使文本在几毫秒后淡出：

$("span").click(function() {
  $("span").css("color", "grey");
  $(this).css("color", "red");
});
$("#select1").click(function() {
  $("#down").fadeOut(300);
  $("#up").fadeIn(300);
  setTimeout(function() {
    $("#up").fadeOut(300); // fade out the up text
  }, 300); // delay of 0.3s before fading out
});
$("#select2").click(function() {
  $("#up").fadeOut(300);
  $("#down").fadeIn(300);
  setTimeout(function() {
    $("#down").fadeOut(300); // fade out the down text
  }, 300); // delay of 0.3s before fading out
});

jsFiddle：https://jsfiddle.net/qze7mqj4/16/

我还在淡化文字中添加了position:absolute;，这样它就不会使箭头“跳跃”＃34;周围。

您可以在此处详细了解setTimeout：http://www.w3schools.com/jsref/met_win_settimeout.asp

基本上它告诉浏览器在指定的毫秒数后执行一个函数，在这种情况下，我们告诉浏览器在300ms之后fadeOut（）文本。

无法显示和隐藏单击时淡入淡出效果的文本

4 个答案: