如下是我写的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. Python3入门（十三）——常用内置模块之集合模块collections

    1.namedtuple 主要用来定义一种数据类型:它具有Tuple的不变性,而且又能通过属性来访问 例如定义坐标: from collections import namedtuple Point ...

  2. 零基础学Python_汇总贴

    https://time.geekbang.org/course/intro/98 零基础学Python-第一章 :Python介绍和安装-01.Python语言的特点 零基础学Python-第一章 ...

  3. [译]在Pandas的Dataframe中删除行、列

    导入模块 import pandas as pd 创建dataframe data = {'name': ['Jason', 'Molly', 'Tina', 'Jake', 'Amy'], 'yea ...

  4. 用python画 pareto front

    用python画 pareto front 觉得有用的话,欢迎一起讨论相互学习~Follow Me 2D pf import os import matplotlib.pyplot as plt im ...

  5. python中验证码连通域分割的方法详解

    python中验证码连通域分割的方法详解 这篇文章主要给大家介绍了关于python中验证码连通域分割的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用python具有一定的参考学习价值,需 ...

  6. go micro rpc 直接调用 返回500 错误

    开启网关时需要 加上 flags micro api -handle=api --enable_rpc

  7. 比较两个数组的键名，并返回交集：array_intersect_key

    $a1=array("a"=>"red","b"=>"green","c"=>&q ...

  8. asp.net Forms身份验证详解

    在做网站的时候,都会用到用户登录的功能.对于一些敏感的资源,我们只希望被授权的用户才能够访问,这让然需要用户的身份验证.对于初学者,通常将用户登录信息存放在Session中,笔者在刚接触到asp.ne ...

  9. SqlServer里，一条sql进行递归删除

    Server 2005中提供了公用表表达式(CTE),使用CTE,可以使SQL语句的可维护性,同时,CTE要比表变量的效率高得多. 存储过程方法: create proc up_delete_ncla ...

  10. No section matches selector - no section to be FIRST/LAST

    1. 使用KEIL MDK ,STM32F405RG,编译的时候报错 .\Objects\ks3620_stm32f405_proj.sct(): error: L6236E: No section ...