如下是我写的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. 【Redis】Redis Sentinel 哨兵模式搭建

    Redis Sentinel介绍 Redis Sentinel是Redis的官方高可用性解决方案 Redis Sentinel为Redis提供高可用性.实际上,这意味着使用Sentinel可以创建一个 ...

  2. 构造方法(和python初始化变量类似)

    public class Demo1 { int  name2=1; public Demo1(int name) { name=name2; } public Demo1() { } public ...

  3. redis和memcache对比

    1.性能方面:没有必要过多的关心性能,因为二者的性能都已经足够高了.由于Redis只使用单核,而Memcached可以使用多核,所以在比较上,平均每一个核上Redis在存储小数据时比Memcached ...

  4. matplot画3d图像

    import matplotlib.pyplot as plt from mpl_toolkits.mplot3d import Axes3D import numpy as np fig = plt ...

  5. LODOP关联后眉脚条码的遮挡的一种情况

    前面的博文中,有介绍层级关系,最先输出的打印项在下层,后输出的在上层,但是最近发现了一种例外,就是前面有关联的情况下,后面把一个条码设置为页眉页脚项,眉脚项和前面关联其他的项的那个项位置重合,虽然这个 ...

  6. Freemarker讲解

    FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP.它不仅可以用作表现层的实现 ...

  7. Ansible安装配置及命令使用详解

    Ansible和saltstack目前市面上一些其它的项目管理工具有很大的不同,它的设计初衷就是为了更方便.快捷的进行配置管理.它易于安装和使用.语法也非常简单易学.你可以用Ansible将平常复杂的 ...

  8. Ubuntu12.10添加matlab启动器

    首先我们要了解,Ubuntu 的 Dash 里所有程序都是在 /usr/share/applications 中的,所以我们的思路很简单——建一个类似于“快捷方式”一样的东西扔进去就好了. 1. 终端 ...

  9. spring boot配置文件application.properties配置JPA以及数据源

    1.application.properties配置jpa模板 spring.datasource.url=jdbc:mysql://localhost:3306/springboottest?use ...

  10. 二进制知识（java中的位操作）

    文章目录 前言 机器数 真值 原码 反码 补码 计算机中保存的都是补码 位操作 强制转换,精度丢失 前言 讲二进制的东西,必须要说明是多少位机器,八位机上的 1000 1000 和 十六位机上的 10 ...