动效解决方案 Velocity.js

一、Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。

• 官网 http://shouce.jb51.net/velocity/index.html

二、功能介绍

Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。

三、安装使用

官网下载 velocity.js 文件，直接引入项目中即可

四、场景实践

1、带指示器的导航

 let oLis = document.querySelectorAll('li');
        oLis.forEach((item, index)=>{   
            item.onclick = function(index) {
                Velocity(document.getElementsByClassName('line')[0], {
                    left: this.offsetLeft
                },{
                    duration: 330,
                    easing: 'easeOutCirc'
                })
                oLis.forEach(item=>{item.classList.remove('active')})
                this.classList.add('active')
            }
        })

2、主题切换

<div class="wrapper">
        <h1>暗黑模式 & 光明模式 切换</h1>
        <div class="switcher">
            <button id="dark" onclick="toggleBg(1)">暗黑</button>
            <button id="light" onclick="toggleBg(2)">光明</button>
        </div>
    </div>

    <script>
        function toggleBg(type)  {
            let oBody = document.body; 
            if(type === 1){
                Velocity(oBody, {
                backgroundColor: "#000"
                })
                Velocity(document.querySelector('h1'), {
                    color: '#fff'
                })
                Velocity(document.querySelector('.switcher'), {
                    borderColor: '#303030'
                })
               document.querySelector('#dark').classList.add('dark-active');
               document.querySelector('#light').classList.remove('light-active');

            }else {
                Velocity(oBody, {
                backgroundColor: "#fff"
                })
                Velocity(document.querySelector('h1'), {
                    color: '#000'
                })
                Velocity(document.querySelector('.switcher'), {
                    borderColor: '#f8f7f7'
                })
                document.querySelector('#light').classList.add('light-active')
                document.querySelector('#dark').classList.remove('dark-active')
            }
        }
       
    </script>

感兴趣的童鞋可以去尝试下，喜欢的看官可以麻烦您点点星星吗，后续会更新更多好玩的~~