动画问题答案

【问题标题】：Issue with animation动画问题
【发布时间】：2018-03-21 16:55:48
【问题描述】：

我最近一直在为我的手机菜单栏制作动画。动画效果很好，但是在执行点击功能时，在动画结束时会发生错误。

如果您在单击功能结束时观察到，会发生一些错误，因此不透明度面临一些问题。

<!DOCTYPE html>
<html lang="en">
   <head>
      <!--Site Title-->
      <title>Guardian - MC</title>
      <meta charset="utf-8">
      <meta name="format-detection" content="telephone=no">
      <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      <link rel="stylesheet" type="text/css" href="http://www.missancomputer.com/sidebar/style.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script>
   </head>
   <body style="overflow-x:hidden">
         <ul class="mob-menu" style="padding:6%;margin:0;background-color:#000">
            <li class="gradient-blue divide">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-9 navigation-description">
                        <div class="row" >
                           <h3>About Us</h3>
                        </div>
                        <div class="row">
                           <h3 style="font-size:1rem;font-weight:300">Explore More</h3>
                        </div>
                     </div>
                     <div class="col-3 navigation-image"><img src="user.svg" style="width:7rem"/></div>
                  </div>
               </div>
            </li>
            <li class="gradient-red divide">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-9 navigation-description">
                        <div class="row" >
                           <h3>Solutions</h3>
                        </div>
                        <div class="row">
                           <h3 style="font-size:1rem;font-weight:300">Plan Of Action</h3>
                        </div>
                     </div>
                     <div class="col-3 navigation-image"><img src="puzzle.svg" style="width:7rem"/></div>
                  </div>
               </div>
            </li>
            <li class="gradient-darkblue divide">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-9 navigation-description">
                        <div class="row" >
                           <h3 style="font-size:2.5rem;font-weight: 500;">Services</h3>
                        </div>
                        <div class="row">
                           <h3 style="font-size:1rem;font-weight:300">Core Competencies   </h3>
                        </div>
                     </div>
                     <div class="col-3 navigation-image"><img src="sup.svg" style="width:7rem"/></div>
                  </div>
               </div>
            </li>
            <li class="gradient-orange divide">
               <div class="container-fluid">
                  <div class="row">
                     <div class="col-9 navigation-description" >
                        <div class="row" >
                           <h3 style="font-size:2.5rem;font-weight: 500;">Support</h3>
                        </div>
                        <div class="row">
                           <h3 style="font-size:1rem;font-weight:300">Customer Login</h3>
                        </div>
                     </div>
                     <div class="col-3 navigation-image"><img src="finger.svg" style="width:7rem"/></div>
                  </div>
               </div>
            </li>
         </ul>
   </body>
   <script>
      var basicTimeline = anime.timeline();
basicTimeline
.add({
    targets: '.mob-menu',
width: {
    value: ['0%', '100%'],
    duration: 1000
  }
  })

.add({
  targets: ".divide",
  opacity: {
    value: ['0', '1'],
    duration: 3000,
    delay: function(el, i) {
      $(el).removeClass("otherclass");
      return 100 * (i + 1);
    },
  },
  translateY: {
    value: ['100', '0'],
    duration: 3000,
    delay: function(el, i) {
      $(el).removeClass("otherclass");
      return 100 * (i + 1);
    },
  }
});

   </script>
      <script>
        $(".divide").click(function(){
      var basicTimeline = anime.timeline();
basicTimeline.add({
  targets: ".divide",
  opacity: {
    value: ['1', '0'],
    duration: 3000,
    delay: function(el, i) {
      $(el).removeClass("otherclass");
      return 100 * (i + 1);
    },
  },
  translateY: {
    value: ['0', '-100'],
    duration: 3000,
    delay: function(el, i) {
      $(el).removeClass("otherclass");
      return 100 * (i + 1);
    }
  }
})
.add({
    targets: '.mob-menu',
width: {
    value: ['100%', '0%'],
    duration: 1000
  }
  });
});
   </script>
</html>

【问题讨论】：

我们说的是控制台/代码错误（如果是，它说什么？）还是只是意外的动画？
只是意外的动画，没有控制台错误
查看此链接进行实时预览
missancomputer.com/sidebar

标签： jquery html css twitter-bootstrap anime.js

【解决方案1】：

您在 jQuery 之前加载 Bootstrap。在 Bootstrap 之前加载 jQuery。

【讨论】：

是的，但这似乎并不能解决问题。我已经编辑了代码。
你能看到动画中的故障吗/
问题似乎与不透明度缓和效果有关。不确定...尝试最适合您的情况的缓动效果