jQuery 没有动画备份

Question

我有一个框，单击时应该淡入并向上移动，但它只是保持向下。褪色效果...

感谢您的帮助！

var fadeInDown = function (element, duration, easing) {
  element.css({
    opacity: '0',
    webkitTransform: 'translateY(100%)',
    transform: 'translateY(100%)',
  })
  .animate({
    opacity: '1',
    webkitTransform: 'translateY(0%)',
    transform: 'translateY(0%)',
  }, duration, easing);
};

$('.box').click(function () {
  fadeInDown($('.box'), 400, 'swing');
});

body {
  display: flex;
  justify-content: center;
}

.box {
  width: 200px;
  height: 200px;
  background: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="box"></div>

Answer 1

jQuery 的动画不支持这样的 css 变换。你需要引入一个阶跃函数来让它动画化。这应该接近您要查找的内容：

var fadeInDown = function (element, duration, easing) {
  element.css({
    opacity: '0',
    webkitTransform: 'translateY(0%)',
    transform: 'translateY(0%)',
  })
  .animate({
    opacity: '1'
  }, {
    duration: duration,
    step: function(now, fx) {
      var step = 100*now;
      $(this).css({
        webkitTransform: 'translateY(' + step + '%)',
        transform: 'translateY(' + step + '%)'
      });
    }
  }, easing);
};

$('.box').click(function () {
  fadeInDown($('.box'), 400, 'swing');
});

body {
  display: flex;
  justify-content: center;
}

.box {
  width: 200px;
  height: 200px;
  background: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="box"></div>

另外，看看 this question，它可能会给你一些额外的帮助。

jQuery 没有动画备份

jQuery not animating back up

javascript

jquery

animation

jquery-animate