jQuery和css相结合制作动画----jQuery中animate方法不支持transform属性的解决方案

唐伯虎

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>jQuery和css相结合制作动画----jQuery中animate方法不支持transform属性的解决方案</title>
<head>
  <style>
  .m-test {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
  }
  .m-animation {
    transform: translate(0px, 100px);
    transition: all 0.5s ease-in-out;
  }
  </style>
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
  <div class="m-test" id="m-test"></div>
  <script>
  $(function() {
    var myAction = {};
    var dom = {
      test: $('#m-test')
    };
    $.extend(myAction, {
      initAnimation: function() {
        //dom.test.addClass('m-animation');
        dom.test.css({ transform: 'translate(0px, 100px)', transition: 'all 0.5s ease-in-out' });
      }
    });
    var init = function() {
      myAction.initAnimation();
    }();
  })
  </script>
</body>
</html>

[jQuery] jQuery和css相结合制作动画----jQuery中animate方法不支持transform属性的解决方案

唐伯虎 LV4