Блог

 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;

}
  

Приведенный выше код работает с фиксированным разрешением экрана, но как я могу гарантировать, что он всегда переходит в правый нижний угол страницы?

Установите ваш элемент в position: fixed;

Фиксированное положение приведет к тому, что ваш элемент всегда будет виден в этой позиции. Имейте в виду, z-index потому что, если это не последний элемент в вашем документе, он может исчезнуть под другими элементами или элементами с более высоким z-индексом.

Затем анимируйте его в положение: 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>