css - 使用 Anime.js 将元素定位到任何设备的右下角

Question

function goBottomRight(){
    
  anime({
    targets: '.btn',
    translateX:  240,
    translateY:  320,
    easing: 'easeInOutQuad'
  }).play;
   
   

}

<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;

}

上面的代码适用于固定的屏幕分辨率，但我如何确保它始终位于页面的右下角？

Answer 1

将您的元素设置为position: fixed;

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

然后将其动画化到位置:right:0px;底部: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>