javascript - 如何使用 animate.css 和 Jquery 制作动画

Question

我有以下代码片段

HTML

<ul id="test">
    <li class="a">1</li>
    <li class="b">2</li>
    <li class="c">3</li>
</ul>
<ul id="test2">
    <li data-prod="a" class="animated">
        <div>1</div>
        <div>2</div>
        <div>3</div>        
    </li>
    <li data-prod="b" class="animated hide">
        <div>1</div>
        <div>2</div>
        <div>3</div> 
    </li>
    <li data-prod="c" class="animated hide">
        <div>1</div>
        <div>2</div>
        <div>3</div> 
    </li>
</ul>

CSS

ul#test > li {
    display: inline-block;
    padding: 10px;
    cursor: pointer;
}
#test {
    position: fixed;
    top: 0;
    left: 0;
}
#test2 {
    position: fixed;
    top: 0;
    right: 0;
    list-style: none;
}
#test2 > li {
    background: yellow;
    width: 350px;
    height: 600px;
    /* transition: height 0.3s ease, width 0.2s ease;*/
    overflow: hidden;
    margin-top: -30px;
    padding-top: 30px;
    margin-right: -50px;
}
.hide {
    display: none;
}

还有这个jquery

$(document).ready(function () {

    $('#test li').on('click', function () {

        var className = $(this).attr('class');
        $('#test2 > li').each(function () {

            var prodName = $(this).data('prod');


            if (prodName == className) {

                $('#test2 > li').removeClass('bounceInRight').addClass('bounceOutRight');
                $this = $(this);
                setTimeout(function () {
                    console.log(this);
                    $('#test2 > li').addClass('hide')
                    $this.removeClass('hide bounceOutRight').addClass('bounceInRight');
                }, 400);


            }
        });
    })
});

这是 DEMO

我有几个问题

1. 每次点击 li of ul with id #test 它会激活具有 id #test2 的 ul 的适当 li。如何为 li 中的每个 div 设置动画fadeInTop (animate.css) 依次无在 li 完成动画后使用类和 ID(仅使用标签选择器)。
2. 有没有更好的方法来完成我用 jquery 所做的事情并且性能更好。我在codereview中添加了这部分问题

Answer 1

您可以为动画添加回调。如果不删除和添加类，您将无法重复动画。

               $(document).ready(function () {

        $('#test li').on('click', function () {

            var className = $(this).attr('class');
            $('#test2 > li').each(function () {

                var prodName = $(this).data('prod');


                if (prodName == className) {

                    $('#test2 > li').removeClass('bounceInRight').addClass('bounceOutRight');
                    $this = $(this);
                    $this.find('div').removeClass('fadeInDown');
                    setTimeout(function () {
                        console.log(this);
                        $('#test2 > li').addClass('hide')
                        $this.removeClass('hide bounceOutRight').addClass('bounceInRight');
                    }, 400);

                    
                }
            });
          
        })
        
        $('#test2 li').on('oanimationend animationend webkitAnimationEnd', function() { 
            $(this).find('div').each(function(i){
               var $this = $(this);
                setTimeout(function(){
                  $this.addClass('animated fadeInDown')
                },i*500);
                
            })
        });
    });

    ul#test > li {
        display: inline-block;
        padding: 10px;
        cursor: pointer;
    }
    #test {
        position: fixed;
        top: 0;
        left: 0;
    }
    #test2 {
        position: fixed;
        top: 0;
        right: 0;
        list-style: none;
    }
    #test2 > li {
        background: yellow;
        width: 350px;
        height: 600px;
        /* transition: height 0.3s ease, width 0.2s ease;*/
        overflow: hidden;
        margin-top: -30px;
        padding-top: 30px;
        margin-right: -50px;
    }
    .hide {
        display: none;
    }
    ul#test2 > li div {  padding: 5px; transform: translate3d(0,-2000px,0)}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" rel="stylesheet" />

<ul id="test">
  <li class="a">1</li>
  <li class="b">2</li>
  <li class="c">3</li>
</ul>
<ul id="test2">
  <li data-prod="a" class="animated hide">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </li>
  <li data-prod="b" class="animated hide">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </li>
  <li data-prod="c" class="animated hide">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </li>
</ul>