Question

这可能是一般的移动设备或iOS问题，但我正在测试分别运行iOS 7和9的iphone 4和ipad Mini 1。

我有一个简单的菜单图标动画设置，以便在单击时扩展其高度（当菜单打开时）。在绑定到菜单div的单击事件上触发动画。它可以在桌面浏览器上完美运行，但不会在我正在测试的任何一个移动设备上制作动画。这是我第一次使用库来动画项目中的元素，所以我不熟悉它的怪癖。

任何人都可以告诉我为什么这不适用于移动设备吗？可能是因为我将动漫的函数调用与事件绑定了吗？或者说animejs与我正在测试的那些浏览器的版本不兼容。

这是我的代码（如果您需要更多上下文，我会乐意将其包括在内，但现在我觉得这已经足够了）：

var	rem = function rem() {
		    let html = document.getElementsByTagName('html')[0];

		    return function () {
		        return parseInt(window.getComputedStyle(html)['fontSize']);
		    }
		}();

	function toRem(length) {
	    return (parseInt(length) / rem());
	};
  
var showTop = document.getElementById( 'showTop' ),
  nav_dot = $(".nav_dot");
  
showTop.onclick = function() {
		if (toRem(nav_dot.height()) == 0.5 ){ 

			let nav_open = anime({
			  targets: '#showTop .nav_dot',
			  opacity: 0.5,
			  height: ['0.5rem', '4rem'],
			  easing: 'easeInOutQuad'
			});
      
		} else {
			let nav_close = anime({
			  targets: '#showTop .nav_dot',
			  opacity: 0.7,
			  height: ['4rem', '0.5rem'],
			  easing: 'easeInOutQuad'
			});
		}
  };

.nav_dots{
  height: auto;
  width: auto;
  position: relative;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  background: none;
  z-index: 100000;
}

.nav_dot {
  margin: 0 0.5rem;
  right: 0;
  height: 0.5rem;
  width: 0.5rem;
  background: #333;
  border-radius: 0.5rem;
  opacity: 1;
  display: inline-block;
  }

<div id="showTop" class="nav_dots element nav-trigger">
          <span class="nav_dot"></span>
          <span class="nav_dot"></span>
          <span class="nav_dot"></span>
          <span class="nav_dot"></span>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>

anime.js动画没有在Safari（iOS7）和Opera Mini（iOS9）

0 个答案: