Question

<button class='btn' onclick='goBottomRight()'>Click Me</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

anime.js

我正在尝试使用function goBottomRight(){ anime({ targets: '.btn', translateX: 240, translateY: 320, easing: 'easeInOutQuad' }).play; }来创建动画，在该动画中您单击一个元素，该动画将转到页面的右下角，但同时我需要它对台式机和移动设备具有响应性。 / p>

到目前为止，这是我的代码。

{{1}}

以上代码可在固定屏幕分辨率下工作，但如何确保它始终位于页面的右下角？

Answer 1

将元素设置为position: fixed;

固定位置将使您的元素在该位置上始终可见。请记住z-index，因为如果它不是文档中的最后一个元素，它可能会在其他元素或具有较高z-index的元素下消失。

然后为其动画以定位：right:0px; bottom: 0px;

这将在任何屏幕上提供所需的行为。

function goBottomRight()
{
  var element = document.querySelector('.btn');
  element.style.position = 'fixed';  
  anime({
    targets: element,
    right:  '0px',
    bottom:  '0px',
    easing: 'easeInOutQuad'
  });
}

<button class='btn' onclick='goBottomRight()'>Click Me</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

使用Anime.js在任何设备上将元素定位到右下角

1 个答案: