如下是我写的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. 123457123456#2#----com.MC.ShiZi365--前拼后广--儿童识字Game-mc22222222222222222

    com.MC.ShiZi365--前拼后广--儿童识字Game-mc

  2. Windows自动计划任务与ParamStr详解

    ParamStr函数: ParamStr(1),..ParamStr(N) ParamStr(1)代表程序入口的第一个参数,同理,ParamStr(N)代表第N个参数.可通过如下操作进行参数的赋值. ...

  3. iphone那些事儿

    1.微信文件如何发送到钉钉? 打开微信的某文件,点击右上角三个点,选择其他应用打开,选择钉钉.即可复制文件到钉钉. 2.无限网地址 设置-通用-关于本机-无线局域网地址 锂离子电池,受气温影响,气温低 ...

  4. 微服务Consul系列之服务注册与服务发现

    在进行服务注册之前先确认集群是否建立,关于服务注册可以看上篇微服务Consul系列之集群搭建的介绍,两种注册方式:一种是注册HTTP API.另一种是通过配置文件定义,下面讲解的是基于后者配置文件定义 ...

  5. beego框架(golang)学习验证码

    beego框架(golang)学习验证码 登录页面使用验证码 路由设置 /beego_admin_template/routers/router.go get请求页面, post验证用户名密码和验证码 ...

  6. 数据挖掘经典算法PrefixSpan的一个简单Python实现

    前言 用python实现了一个没有库依赖的"纯" py-based PrefixSpan算法. Github 仓库 https://github.com/Holy-Shine/Pr ...

  7. 异常查错java.net.SocketException: Connection reset

    用httpclient访问后台接口报错java.net.SocketException: Software caused connection abort: recv failed,百度了一圈都说是由 ...

  8. [转帖]Docker Hub上镜像发现挖矿蠕虫病毒，已导致2000台主机感染

    Docker Hub上镜像发现挖矿蠕虫病毒,已导致2000台主机感染 https://www.kubernetes.org.cn/5951.html 本来想说可以用 official版本的镜像 但是一 ...

  9. [转帖]Red Hat K8s 关键人物 Grant Shipley 跳槽到 VMware

    Red Hat K8s 关键人物 Grant Shipley 跳槽到 VMware   https://news.cnblogs.com/n/641944/ 这四小时的工作效率 太无敌了.. 投递人  ...

  10. [#] - .Net平台的实时性能监控

    App Metricshttps://www.app-metrics.io ASP.NET Core之跨平台的实时性能监控http://www.cnblogs.com/GuZhenYin/p/7170 ...