如下是我写的demo源码：

可以直接复制用浏览器打开看到效果哦；
<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            #box{

                width: 50px;

                height: 50px;

                background: red;

                position: absolute;

                left: 0;

                top: 0;

            }

        </style>

    </head>

    <body>

        <div id="box"></div>

       <script type="text/javascript">

           //利用es6 new Promise

            function movePromise(obj,attr,target,duration){

             return new Promise((res,rej)=>{

                 var b = parseInt(getComputedStyle(obj)[attr]);

                 var c= target - b;

                 var d = duration;

                 var temp = new Date().getTime();

                 var timer = setInterval(function(){

                     var t = new Date().getTime()-temp;

                     if(t>=d){

                         clearInterval(timer);

                         t= d;

                     }

                 var v = c/d*t + b;

                 obj.style[attr] = v+'px';

                 if(t===d){

                     res()

                 }

             },20)

         })

         }

         //用Promise封装后可以无限加动画运动轨迹,代码简洁

         movePromise(box,"width",200,500)

         .then(()=>movePromise(box,"left",300,100))

         .then(()=>movePromise(box,"top",300,100))

         .then(()=>movePromise(box,"height",300,100))

         .then(()=>movePromise(box,"top",100,300))

         .then(()=>movePromise(box,"top",200,300))

         .then(()=>movePromise(box,"top",150,300))

       </script>

    </body>

</html>

如上源码动画轨迹：

向右移动---向下移动---变高---向上移动--向下移动---向上移动 （移动时间可自己控制）

【前端开发】】ES6属性promise封装js动画的更多相关文章

  1. 微信小程序ES6方法Promise封装接口

    为何要封装接口? 有小程序开发的经验者,相信对微信API Request很熟悉了.对接接口时,有大部分的开发者都是直接调用request方法,去请求后台接口并渲染数据.诚然,直接使用api发起请求对接 ...

  2. openresty 前端开发轻量级MVC框架封装一（控制器篇）

    通过前面几章,我们已经掌握了一些基本的开发知识,但是代码结构比较简单,缺乏统一的标准,模块化,也缺乏统一的异常处理,这一章我们主要来学习如何封装一个轻量级的MVC框架,规范以及简化开发,并且提供类似p ...

  3. 前端开发--面试题整理（JS篇）

    1.截取字符串abcdace的acealert('abcdace'.substring(4)); 2.规避javascript多人开发函数重名问题命名空间封闭空间js模块化mvc(数据层.表现层.控制 ...

  4. web前端开发必懂之一：JS继承和继承基础总结

    首先,推荐一篇博客豪情的博客JS提高: http://www.cnblogs.com/jikey/p/3604459.html ,里面的链接全是精华, 一般人我不告诉他; 我们会先从JS的基本的设计模 ...

  5. openresty 前端开发轻量级MVC框架封装二（渲染篇）

    这一章主要介绍怎么使用模板,进行后端渲染,主要用到了lua-resty-template这个库,直接下载下来,放到lualib里面就行了,推荐第三方库,已经框架都放到lualib目录里面,lua目录放 ...

  6. 从零开始学习前端开发 — 15、CSS3过渡、动画

    一.css3过渡 语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式; 1.过渡属性(transition-property) 取值:all 所有发生变化的css属性都添加过渡 e ...

  7. 前端开发--css属性书写顺序

    css属性顺序是css良好编码风格的一部分,有助于提高代码可读性,便于发现代码问题,有利于团队合作.(依次排后) example { /*显示属性*/ display: ; visibility: ; ...

  8. 前端开发学习笔记 - 1. Node.JS安装笔记

    Node.JS安装笔记 Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an ...

  9. 分享一些前端开发中最常用的JS代码片段~ 干货~

    http://www.w3cfuns.com/notes/25068/1d0d350a974d879e63f1115cf80a3288.html

随机推荐

  1. VS编译出错不自动运行上次的程序

  2. jQuery根据style筛选元素

    <div style="display:block;"> <input/> </div> <div style="display ...

  3. sqoop import mysql to hive table：GC overhead limit exceeded

    1. Scenario description when I use sqoop to import mysql table into hive, I got the following error: ...

  4. Spring MVC 验证表单

      在实际工作中,得到数据后的第一步就是检验数据的正确性,如果存在录入上的问题,一般会通过注解校验,发现错误后返回给用户,但是对于一些逻辑上的错误,比如购买金额=购买数量×单价,这样的规则就很难使用注 ...

  5. Flink assignAscendingTimestamps 生成水印的三个重载方法

    先简单介绍一下Timestamp 和Watermark 的概念: 1. Timestamp和Watermark都是基于事件的时间字段生成的 2. Timestamp和Watermark是两个不同的东西 ...

  6. LeetCode_404. Sum of Left Leaves

    404. Sum of Left Leaves Easy Find the sum of all left leaves in a given binary tree. Example: 3 / \ ...

  7. 【docker 使用】创建镜像docker build

    创建镜像命令 docker build -t [镜像name]:[镜像tag] -f [dockerfile路径] [资源目录] 执行该命令后,docker会将[资源目录]打包,之后在dockerfi ...

  8. 石子合并 区间DP模板题

    题目链接:https://vjudge.net/problem/51Nod-1021 题意 N堆石子摆成一条线.现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆石子合并成新的一堆,并将新的一堆石 ...

  9. 微服务Consul系列之集群搭建

    在上一篇中讲解了Consul的安装.部署.基本的使用,使得大家有一个基本的了解,本节开始重点Consul集群搭建,官方推荐3-5台Server,因为在异常处理中,如果出现Leader挂了,只要有超过一 ...

  10. gitstats 统计gitlab仓库中的代码

    使用Git版本库,有一些可视化的工具,如gitk,giggle等,来查看项目的开发历史.但对于大型的项目,这些简单的可视化工具远远不足以了解项目完整的开发历史,一些定量的统计数据(如每日提交量,行数等 ...