如下是我写的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. ubuntu2 setting

    luo@luo-ThinkPad-W540:research$ conda create -n tf2019 python=3.6Solving environment: done ==> WA ...

  2. LeetCode_237. Delete Node in a Linked List

    237. Delete Node in a Linked List Easy Write a function to delete a node (except the tail) in a sing ...

  3. mssql的update :from语法

    一条Update更新语句是不能更新多张表的,除非使用触发器隐含更新.而表的更新操作中,在很多情况下需要在表达式中引用要更新的表以外的数据.我们先来讨论根据其他表数据更新你要更新的表 一.MS    S ...

  4. 高级UI-沉浸式设计

    关于沉浸式设计,在国内指的是Toolbar和系统状态栏相统一,而谷歌官方给出的沉浸式则是指整个界面为UI所用,而这里所说的沉浸式则是指的前者,涉及4.4和5.0及以上,4.4以下的Android做不出 ...

  5. mysql 转换NULL数据方法

    mysql 转换NULL数据方法<pre>SELECT info1,info2, IFNULL(info3,0) as info3 FROM `info1`;</pre>< ...

  6. [bzoj3420]Poi2013 Triumphal arch_树形dp_二分

    Triumphal arch 题目链接:https://lydsy.com/JudgeOnline/problem.php?id=3420 数据范围:略. 题解: 首先,发现$ k $具有单调性,我们 ...

  7. Nginx07---反向代理

    小程序使用nginx反向代理https和wss user www www; worker_processes auto; error_log /www/wwwlogs/nginx_error.log ...

  8. IDEA创建web项目详细过程

    相关软件:Intellij Idea2017.jdk16.tomcat Intellij Idea直接安装(可根据需要选择自己设置的安装目录),jdk使用1.6/1.7/1.8都可以,主要是配置好系统 ...

  9. 华为模拟机试_C++题解

    华为模拟机试 [编程|100分] a+b 题目描述 计算a+b的和 每行包含两个整数a和b 对于每行输入对应输出一行a和b的和 输入 1 5 输出 6 自解 #include<iostream& ...

  10. 用php的for循环输出四边形，各种三角形和菱形【含空心版本】

    <?php // 实心版 //四边形 for( $i = 1; $i <=5; $i++ ){ for( $j = 1; $j <=5; $j++ ){ echo '*'; } ec ...