如何在动漫js中管理动画顺序

Question

现在我必须使用anime js制作一些动画：第一步是通过点击img（id='arrow')显示三个隐藏元素(input[type='date']，input[type='time']，select）。然后隐藏所有的em如果用户点击箭头另一次，切换：）但当页面加载动画自动启动，而不是通过点击。

        <script>
           var fn1 = anime({
                targets: '.web-f',
                margin: ['20px 0px','20px 5px'],
                opacity: ['0', '1'],
                easing: 'easeInOutQuad'
            });

            document.querySelector('#arrow').onclick = function() {
                fn1.play();
                fn1.finished.then(() => {
                fn1.reverse();
            })
        }
        </script>

            <div id="midlebox">
                <form method='POST' action='/favourites'>
                    {% for row in result %}
                        <div class="form-check">
                            <input type="checkbox" class="check" name="row" id="{{row[1]}}" value="{{row[0]}}">
                            <label class="form-check-label" for="{{row[1]}}">{{ row[0] }}</label>
                        </div>
                    {% endfor %}
                    <div class="date_option">
                        <button type="submit" class="btn" id='btn_add' name='btn_add'>Add to fav</button>
                        <div class="white_block" id="arrow-box"><img id="arrow" src="static/images/right.svg"></div>
                        <select name='food_type' class="web-f" id="selector">
                            <option>Auto</option>
                            <option>Breakfast</option>
                            <option>Lunch</option>
                            <option>Dinner</option>
                            <option>Snack</option>
                        </select>
                        <input type="date" name='calendar' class="web-f" value="" id="calendar">
                        <input type="time" name="timer" class="web-f" value="" id="timer">
                    </div>
                </form>
            </div>

Answer 1

您可以使用回调来观看动画的结束和运行其他。

function anim1() {
  anime({
    targets: ".web-f",
    margin: ["20px 0px", "20px 5px"],
    opacity: ["0", "1"],
    easing: "easeInOutQuad",
    begin: function(anim) {
      beginLogEl.value = "began : " + anim.began;
    },
    complete: function(anim) {
      // call other animation
      anim2()
    }
  });
}
function anim2() {
  anime({
    targets: ".web-f",
    margin: ["20px 5px", "20px 0px"],
    opacity: ["1", "0"],
    easing: "easeInOutQuad"
  });
}
 // call ist other animation
anim1()