Question

我希望在值发生变化时添加淡入淡出过渡。我试过通过CSS但没有成功，就Jquery动画而言，我不知道如何应用它。这是我在codepen上的代码

<div class="selectBox">
  <input type="text" readonly class="selectBox__input" />
  <span class="selectBox__upArrow glyphicon glyphicon-chevron-up"></span>
  <span class="selectBox__downArrow glyphicon glyphicon-chevron-down"></span>
</div>

＆＃13;

var selectData = [ "Pakistan","Palau","Palestinian", "Territories","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal"];

var counter = 0;
var currentElement = selectData[counter];

$('.selectBox__input').val(currentElement);

$('.selectBox__upArrow').on("click",function() {
  if (counter > 0) {
    counter--;
  }
  sel(counter);
});

$('.selectBox__downArrow').on("click",function() {
  if (counter < selectData.length - 1) {
    counter++;
  }
  
  sel(counter);
});

function sel(counter) {
  currentElement = selectData[counter];
  $('.selectBox__input').val(currentElement);
}

＆＃13;

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <style>
      @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

      .selectBox {
        margin: 250px;
        position: relative;
      }

      .selectBox__input {
        padding: 20px;
        border: 2px solid #0088cc;
        z-index: 1;
        font-family: "Open sans";
        font-size: 20px;
        background: #e6f7ff;
      }

      .selectBox__upArrow, .selectBox__downArrow {
        color: #069;
        position: absolute;
        -webkit-transform: scale(2);
        transform: scale(2);
        left: 240px;
        cursor: pointer;
        z-index: 9999;
      }

      .selectBox__upArrow {
        top: 8px;
      }
      .selectBox__downArrow {
        top: 48px;
      }
    </style>
  </head>
  <body>
    <div class="selectBox">
      <input type="text" readonly class="selectBox__input" />
      <span class="selectBox__upArrow glyphicon glyphicon-chevron-up"></span>
      <span class="selectBox__downArrow glyphicon glyphicon-chevron-down"></span>
    </div>
  </body>
</html>

＆＃13;

http://codepen.io/shezk/pen/NxZgeE

Answer 1

有许多方法可以做到这一点，没有对错。

这是一个：

逻辑是将输入的颜色设置为透明（使用.addClass('out')并将css-transition添加到输入以使其生成动画），等待300ms（例如），设置输入的值，.removeClass('out')将删除该类并返回（转换）颜色为他的值。

如果不清楚，请告诉我。

＆＃13;

var selectData = [ "Pakistan","Palau","Palestinian", "Territories","Panama","Papua New Guinea","Paraguay","Peru","Philippines","Poland","Portugal"];

var counter = 0;
var currentElement = selectData[counter];

$('.selectBox__input').val(currentElement);

$('.selectBox__upArrow').on("click",function() {
  if (counter > 0) {
    counter--;
  }
  sel(counter);
});

$('.selectBox__downArrow').on("click",function() {
  if (counter < selectData.length - 1) {
    counter++;
  }

  sel(counter);
});

function sel(counter) {
  currentElement = selectData[counter];

  var input = $('.selectBox__input').addClass('out');
  setTimeout(function() {
    input.val(currentElement).removeClass('out');
  }, 300);
}

＆＃13;

input {
  -webkit-transition:all .3s ease;  
  transition:all .3s ease;
}

.out {
  color:transparent;  
}

＆＃13;

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <style>
      @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

      .selectBox {
        margin: 250px;
        position: relative;
      }

      .selectBox__input {
        padding: 20px;
        border: 2px solid #0088cc;
        z-index: 1;
        font-family: "Open sans";
        font-size: 20px;
        background: #e6f7ff;
      }

      .selectBox__upArrow, .selectBox__downArrow {
        color: #069;
        position: absolute;
        -webkit-transform: scale(2);
        transform: scale(2);
        left: 240px;
        cursor: pointer;
        z-index: 9999;
      }

      .selectBox__upArrow {
        top: 8px;
      }
      .selectBox__downArrow {
        top: 48px;
      }
    </style>
  </head>
  <body>
    <div class="selectBox">
      <input type="text" readonly class="selectBox__input" />
      <span class="selectBox__upArrow glyphicon glyphicon-chevron-up"></span>
      <span class="selectBox__downArrow glyphicon glyphicon-chevron-down"></span>
    </div>
  </body>
</html>

＆＃13;

选择带箭头的方框

1 个答案: