2018-04-19 swig/动画

• 学长说了，首页加载不要用ajax,用了swig模板使得页面简洁一些

<div class="row" id="musicList">
    {% for val in datas %}
        <div class='col-md-3'>
            <a href='/api/play?hash={{val.Hash}}'>
                <img src='{{val.img}}'/>
                <p>{{val.songname}} - {{val.author}}</p>
            </a>
        </div>
    {% endfor %}
</div>

在数据传输的时候需要传递参数过来，但是要注意要以json格式
main.js
render函数可以传参

router.get('/',function (req,res,next) {
    User.find(
        {Status:{$lt:2}}
    ).then(function (info) {
        if(info){
            console.log(info); 

            res.render('index',{datas:info});//渲染的是index,html页面，datas是我们传输的参数 

        }else{
            console.log('不存在');
        }
    });
});

• 1. 让播放页的图片旋转起来

#imga{
    position: absolute;
    width: 54%;
    /*height: 50%;*/
    top:21%;
    left:23%;
    animation: spin 12s linear infinite;
}

@keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

2. 但是我希望可以播放的时候在旋转，暂停的时候停止旋转
   增加一个动画类

.ani{
    animation: spin 12s linear infinite;
}

js部分

audio.addEventListener("playing", function(){
    $('#imga').toggleClass('ani');
});
audio.addEventListener("pause", function(){
    $('#imga').toggleClass('ani');
});

toggleClass：
有这个类就会移除，没有就会添加这个类
playing audio播放状态
pause   audio暂停状态

3. 可是这样的话又会有一个问题出现，在停止动画的时候会很急促的停止
   因此又增加了一个pause类

.pause {
    animation-play-state: paused;
}

js部分改成这样

v.addEventListener("playing", function(){
    $('#imga').removeClass('pause');        
});
v.addEventListener("pause", function(){
    $('#imga').addClass('pause');
});

js操作只是暂停动画，而不是移除动画类