动效解决方案 Kute.js

动效解决方案 Kute.js - 简书一、Kute.js 是一个纯粹的动效引擎，拥有出色的性能。它可以兼容许多不同的浏览器，包括一些相对传统的浏览器。它还具备许多插件，提供有效的运行环境。 官网 http://t...https://www.jianshu.com/p/d14d2f2fff12

一、Kute.js 是一个纯粹的动效引擎，拥有出色的性能。它可以兼容许多不同的浏览器，包括一些相对传统的浏览器。它还具备许多插件，提供有效的运行环境。

• 官网 http://thednp.github.io/kute.js/index.html

二、功能介绍

KUTE.js 包含一系列组件，用于表示属性、SVG 转换、绘制 SVG 笔触和路径变形、文本字符串写入或数字倒计时，以及其他 CSS 属性，如颜色、边框半径或排版属性。

三、安装

npm i kute.js

下载完后，项目下新建 lib文件夹，直接将 kute.js文件放置于该文件夹下，
index.html 文件中引入即可。

四、场景实践

1、缓动出现

<template>
    <div class="kute">
        <button @click="openPop">弹出</button>
        <div class="mask">
            <div class="box">
                <div class="btn">
                    <button>取消</button>
                    <button @click="closePop">确定</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                
            }
        },
        methods: {
            openPop() {
                let oBox = document.getElementsByClassName('box')[0];
                let oMask = document.getElementsByClassName('mask')[0];
                oMask.style.display = 'block'
                KUTE.to(oMask, {opacity: 1},{easing:'easingQuinticInOut', duration:400}).start()
                KUTE.to(oBox, {bottom: 0},{easing:'easingCircularInOut', duration:500}).start()
            },
            closePop() {
                let oMask = document.getElementsByClassName('mask')[0];  
                let oBox = document.getElementsByClassName('box')[0];
                KUTE.to(oMask, {opacity: 0},{easing:'easingQuinticInOut', duration:400}).start()
                KUTE.to(oBox, {bottom: -200},{easing:'easingBackInOut', duration:500}).start()
                setTimeout(()=>{
                    oMask.style.display = 'none'
                },500)
            }
        },
    }
</script>

<style lang="less" scoped>
    .kute {
        height: 100%;
    }
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        display: none;
        opacity: 0;
    }
    .box {
       position: fixed;
       bottom: -200px;
       width: 100%;
       height: 200px;
       background: #fff;
       border-top-left-radius: 12px;
       border-top-right-radius: 12px;
       .btn {
           padding: 12px 20px;
           display: flex;
           justify-content: space-between;
           button {
               width: 70px;
               height: 28px;
               outline: none;
               border: none;
               color: #fff;
               background: rgb(7, 177, 245);
               border-radius: 4px;
           }
       }
    }
</style>

2、滚动跳转

<template>
    <div>
        <div class="nav">
            <ul>
                <li @click="jumpTo('text01')">内容一</li>
                <li @click="jumpTo('text02')">内容二</li>
                <li @click="jumpTo('text03')">内容三</li>
                <li @click="jumpTo('text04')">内容四</li>
            </ul>
        </div>
        <div class="content">
            <div id="text01" class="box">
                <h1>中华人民共和国成立</h1>
                <p>1949年9月21日至9月30日，第一届中国人民政治协商会议全体会议在北平召开。9月29日，会议通过具有临时宪法性质的《中国人民政治协商会议共同纲领》，政协代行全国人民代表大会的职权</p>
                <p>9月30日下午，第一届中国人民政治协商会议全体会议产生政协第一届全国委员会，选举毛泽东为中央人民政府主席，朱德、刘少奇、宋庆龄、李济深、张澜、高岗为副主席，其他56人为中央人民政府委员。</p>
                <p>1949年10月1日，在北京天安门广场举行开国大典，毛泽东在天安门城楼上宣告中华人民共和国中央人民政府成立，中华人民共和国正式成立。</p>
            </div>
            <div id="text02" class="box">
                <h1>社会主义制度的建立</h1>
                <p>建国之初，由于中国经历了长期的动乱与战争，社会矛盾尖锐，经济水平落后，货币贬值，交通运输不畅。建国后，一个全面模仿苏联工业化模式的共产主义社会便迅速建立起来。</p>
                <p>在1950年代早期，政府进行了大规模的城市工商业社会主义改造和农村土地集体化以及社会改革。从1953年开始，中国开始进行社会主义工业化建设和对农业、手工业与资本主义工商业的社会主义改造（即三大改造），逐步由新民主主义向社会主义过渡 [20]  。到1956年，中国基本建立了社会主义制度，进入社会主义初级阶段。</p>
            </div>
            <div id="text03" class="box">
                <h1>社会主义的建设与失误</h1>
                <p>中国在全面建设社会主义的进程中，取得了巨大的成就，初步奠定了现代化建设的物质文化基础。但也伴随着一些失误。1958年全国各条战线掀起了“大跃进”的高潮。同年8月，中共中央政治局北戴河会议，确定了一工农业生产的高指标。</p>
                <p>在农业上，主要是对农作物产量的估计严重浮夸。生产发展上的高指标和浮夸风，推动着在生产关系方面急于向所谓更高级的形式过渡，主观地认为农业合作社的规模越大，公有化程度越高，就越能促进生产。 其特点是“一大二公”、“一平二调”。1960年开始的三年经济困难更为国民经济雪上加霜。</p>
                <p>1960年冬，中共中央开始纠正农村工作中的“左”倾错误，并且决定对国民经济实行“调整、巩固、充实、提高”的方针，随即在刘少奇、周恩来、陈云、邓小平等的主持下，制定和执行了一系列正确的政策和果断的措施，这是这个历史阶段中的重要转变 [24]  。1962年1月召开的有七千人参加的扩大的中央工作会议，初步总结了“大跃进”中的经验教训，开展了批评和自我批评。</p>
                <p>1966年到1976年，发生了给党和国家带来严重灾难的“文化大革命”。</p>
            </div>
            <div id="text04" class="box">
                <h1>拨乱反正与真理大讨论</h1>
                <p>1976年毛泽东去世后，华国锋接任其职务，逮捕了四人帮。1977年国家由乱到治 [27]  ，经济开始复苏，同时大批在文革期间被打倒的干部得以重新工作，从而揭开了改革开放的序幕。</p>
                <p>邓小平在1977年重新出山，再次恢复中共中央政治局常委和中共中央副主席等职务</p>
                <p>1978年底召开的中共十一届三中全会，实现了新中国成立以来党的历史上具有深远意义的伟大转折，开启了中国改革开放和社会主义现代化建设历史新时期 [29]  。1979年元旦，全国人大常委发表《告台湾同胞书》，宣布采用和平方式统一祖国的方针。1979年以后，中国走上了更加务实的发展道路。原先被打击的一大批知识分子、学者恢复了工作 [30]  。1980年，平反冤假错案，为最大冤案（刘少奇）平反；为影响最大、涉及人数最多的“右派”平反。</p>
                <p>1981年党的十一届六中全会通过《关于建国以来党的若干历史问题的决议》，彻底否定了“文化大革命”。同年9月，叶剑英发表《关于台湾回归祖国，实现和平统一的方针政策》的谈话。1980年代初，邓小平提出”一个国家，两种制度”的伟大构想。</p>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        methods: {
            jumpTo(idName) {
                let oDOM = document.getElementById(idName);
                KUTE.to(window, {scroll: oDOM.offsetTop}).start();
            }
        },
    }
</script>

<style lang="less" scoped>
    .nav {
        position: fixed;
        width: 100%;
        background: #fff;
        ul {
            height: 50px;
            display: flex;
            align-items: center;
            margin: 0;
            li {
                margin: 0;
                width: 20%;
                height: 38px;
                line-height: 38px;
            }
        }
    }
    .content {
 
        .box {
            padding-top: 46px;
        }
    }
    p {
        line-height: 48px;
    }
</style>