Question

我尝试使用transform: translate更改SVG图像的位置并为该运动设置动画。

jQuery(function($) {

  setTimeout(function() {
    $('#svg-logo').addClass("moveToTop");
  }, 8000);

});

#svg-logo {
  max-width: 45vw;
  transition: all 1000ms ease;
  -webkit-transition: all 1000ms ease;
  -moz-transition: all 1000ms ease;
  -ms-transition: all 1000ms ease;
  -o-transition: all 1000ms ease;
  &.moveToTop {
    transform: translate(0, 0);
    max-width: 250px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="elementor-element elementor-element-1dae199 elementor-widget elementor-widget-html" data-id="1dae199" data-element_type="widget" data-widget_type="html.default">
  <div class="elementor-widget-container">
    <object id="svg-logo" type="image/svg+xml" data="file.svg"></object>
  </div>
</div>

问题

在页面加载时，徽标位于屏幕中间。 8秒后，我想对移动到左上角进行动画处理，以将其放置为基本徽标并将其缩小。如何将translate(0,0)设置为绝对值？可能吗？

我也尝试过position:absolute;left:50px;top:50px的可能性，但是我需要从当前位置移动到位置Y。如何实现呢？

Answer 1

我为你做了。您只需要更改HTML和CSS以及所需动画的值即可。

    $(document).ready(function(){
        setTimeout(function(){
               $('.move-box').animate({top: "10px", left: "10px" }); 
        },5000);
    });

.move-box{
    width: 100px;height: 100px;background-color: red;
    position: absolute;
    left: 100px;top: 300px;
}

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


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

SVG图像的jQuery动画-从当前位置移动到另一个位置

1 个答案: