Question

我试图通过添加position: absolute <div> left样式属性根据所选标签进行更改来设置我的topbar动画。

经过这么多尝试，如果我尝试从第二个选项卡转到第三个选项卡，我就没有正确的方法从头开始。这种情况的主要问题在于：

element.style.left = ((to - last) * 33 * delta) + (last * 33) + '%';

delta从0开始并以指示值结束。它应该从实际位置开始。

同样，我试图从第三个标签转到第二个标签，但我没有得到解决方案。

下面我将plunkr粘贴到我工作的地方。

有人可以帮我这个吗？

感谢您的建议。

Answer 1

它没有用，因为在动画完成后你没有设置last。我在您的脚本中添加了一个onComplete回调来处理它。此外，两个方向的步进功能实际上使用相同的公式：

＆＃13;

'use strict';

var last = 0;

function elastic(progress) {
  return Math.pow(2, 10 * (progress - 1)) * Math.cos(20 * Math.PI * 1.5 / 3 * progress);
}

function linear(progress) {
  return progress;
}

function quad(progress) {
  return Math.pow(progress, 2);
}

function quint(progress) {
  return Math.pow(progress, 5);
}

function circ(progress) {
  return 1 - Math.sin(Math.acos(progress));
}

function back(progress) {
  return Math.pow(progress, 2) * ((1.5 + 1) * progress - 1.5);
}

function bounce(progress) {
  var a, b, result;
  
  for (a = 0, b = 1, result; 1; a += b, b /= 2) {
    if (progress >= (7 - 4 * a) / 11) {
      return -Math.pow((11 - 6 * a - 11 * progress) / 4, 2) + Math.pow(b, 2);
    }
  }
}

function makeEaseInOut(delta) {
  return function (progress) {
    if (progress < 0.5) {
      return delta(2 * progress) / 2;
    } else {
      return (2 - delta(2 * (1 - progress))) / 2;
    }
  };
}

function makeEaseOut(delta) {
  return function (progress) {
    return 1 - delta(1 - progress);
  };
}

function animate(opts) {
  
  var start = new Date();
  
  var id = setInterval(function () {
    
    var timePassed = new Date() - start;
    
    var progress = timePassed / opts.duration;
    
    if (progress > 1) {
      progress = 1;
    }
    
    var delta = opts.delta(progress);
    
    opts.step(delta);
    
    if (progress === 1) {
      clearInterval(id);
      opts.onComplete();
    }
    
  }, opts.delay);
}

function move(to) {
  var element = document.getElementById('nb-line');
  var delta = quint;
  var duration = 400;

  animate({
    delay: 10,
    duration: duration || 1000,
    delta: delta,
    step: function (delta) {
        element.style.left = (((to - last) * 33 * delta) + (last * 33)) + '%';
    },
    onComplete: function() {
      last = to;
    }
  });
}

＆＃13;

.li-cont {
  width: 100%;
  height: 30px;
  display: flex;
}
li {
  list-style: none;
  width: 33%;
  height: 100%;
}
a {
  text-align: center;
  display: flex;
  align-items: center;
  display: block;
  width: 100%;
  height: 100%;
}
#nb-line {
  width: 33%;
  height: 5px;
  background-color: blue;
  position: absolute;
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>
  
  <body>
    <div class="li-cont">
      <li><a onclick="move(0)">1</a></li>
      <li><a onclick="move(1)">2</a></li>
      <li><a onclick="move(2)">3</a></li>
    </div>
    <div id="nb-line"></div>
  </body>

</html>

＆＃13;

Answer 2

我不确定这是否是你想要的，但是我发现最简单的动画制作方法是直接设置有问题元素的css transition-duration属性，比如一秒钟，然后简单地改变一行javascript的元素坐标。 javascript将移动元素，transition属性将确保它顺利完成。尝试将类似的东西添加到css中（其中“#element”是元素的id）：

#element{
transition-duration: 1s;
}

然后将javascript动画位变成一个简单的行，只改变左边的属性：

element.style.left = whateverItNeedsToBe;

选择li时没有动画（）

2 个答案: