transition过渡 ：用于当元素 从一种样式变换为另一种样式 时为元素添加效果。
前端开发中会遇到一些频繁的事件触发，像是resize、scroll、mousedown、mousemove、keyup、keydown等。
transition和animation的选择： 【1】两者的第一点区别，触发条件不同，transition通常和hover等事件配合使用，由事件触发，不立即执行。animation则和gif动态图差不多，立即播放。 animation不能用事件触发。（解决方法：通过点击以后添加类名，执行动画。比如动画时长1s，在点击函数中加动画类名，然后设置倒计时1s，1s动画执行完后再去除这个动画类名即可） 【2】两者第二点区别,transition无法重复执行动效。而animation可以设定循环次数。 【3】两者的第三点区别,animation与js的交互不是很紧密。 两者真正的区别是，animation写死了各个属性的变化值，使其不容易被js改写，但是可以在不同的动画类名之间选择(比如设置fade动画，需要对fade效果做改变，不太好进行。切换/skew)； 而transition的属性值则是可以发生改变。 【4】两者各自的优势 其实两者的区别都可以用一些方式去弥补，只是哪个更便利。
适逢元旦假期，妹子逛街吃火锅看电影陪女朋友之际，写出来的文章难免画风略微粗糙，但是这个动画的实现还是费了一番脑子的，话说程序猿之间交流并不需要过多解释，上代码就搞定。
<!doctype html> <html lang="zh-CN"> <head> <title>scrollReveal.js</title> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .row { display: flex; align-items:
-多年互联网运维工作经验，曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维，曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台（功能如下）： 1)整合了各个公有云API，自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机，连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
CSS 过渡（transition）是通过定义元素从 起点的状态 和 结束点的状态 ，在一定的时间区间内实现元素平滑地过渡或变化 的一种补间动画机制。你可以让属性的改变过程持续一段时间，而不是立即生效。
闭包：当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。
应用情景 经典使用情景：js的一些事件，比如：onresize、scroll、mousemove、mousehover等； 还比如：手抖、手误、服务器没有响应之前的重复点击； 这些都是没有意义的，重复的无效的操作，设置对整个系统的影响还可能是致命的，所以我们要对重复点击的事件进行相应的处理！ 节流函数 所谓的节流函数顾名思义，就是某个时刻限制函数的重复调用。 同样节流函数也是为了解决函数重复提交的问题，而防止重复提交的方法，不止节流函数一种实现。 方法汇总 本文整理了我在工作实践当中，觉的防止js重复提交，
在项目开发中，我们总会引入很多别人封装好的组件模板，使用时仅仅三步，第一步就是install,第二步在main.js里面引入，第三步Vue.use这个组件。例如MintUI，试想我们是否可以自己仿照MintUI写一个自己的组件同样让别人使用，设置成全局组件呢？下面就依照MintUI编写自己的组件库。
最常见的延迟调用与间歇调用，Node环境的立即调用，高频的RAF，以及I/O操作和改UI。这些都是macrotask，事件循环的主要工作就是一轮一轮地检查macrotask queue，并处理这些任务
本文是深入浅出 ahooks 源码系列文章的第七篇，这个系列的目标主要有以下几点：
前两篇文章发出来后，有一些网友在后台咨询我一些问题，我把它们归总罗列在一起。这篇文章既是答网友问也是对前两篇的补充和复习。
bootstrap是目前最流行的前端开发框架，提供了丰富的前端组件，对于经验丰富的高手来说，其中的每项功能可能并不是太复杂，但由于他功能丰富，已经是一套系统，所以整体开发和组织的过程就不简单了 如果你来负责开发bootstrap，你会如何进行整体架构和流程的把控？有时间可以思考下，可以锻炼自己全局思维 通过bootstrap的源码，大概看下bootstrap的工程化开发方式 需求 （1）开发 主要使用css和js开发，js本身就是编程语言，开发环境也很成熟 css麻烦一点，用纯css编写的话效率不高，所以使
首先，使用active触发每一屏的动画，几乎已经约定俗成，应该也建议成为默认的行业规范。
举一个例子，如果js同时有两个线程，同时对同一个dom进行操作，这时浏览器应该听哪个线程的，如何判断优先级？
我们面试的时候经常会问到事件循环，也就是event loop。很多时候我们都是一脸懵，我们通常会背关于事件循环的面试题，讲给面试官的时候自己都不知道自己在讲什么，可能面试官也不太了解事件循环，只是看别人都这么问。那么，仔细了解一下事件循环吧，对以后的编程真的会有帮助的。
js中是没有sleep函数，本文模拟sleep函数实现，比较常见常见的问题就是红路灯。sleep函数可以延迟程序的执行，程序执行过程中能够捕获到异常并抛出。
Webpack是一个前端资源加载以及打包工具,只需要简单的配置即可实现前端各种工程化的操作。 配置 webpack 说难不难，说简单也不简单，现在几大框架都配备了全家桶，quick-start 项目基本上都已经配置好了基础的 webpack 配置。 虽然能够正常使用，但是，对于各个配置项，并不是很清楚。这几天利用空余时间，理一下几个 loader 和 插件的使用。
如demo（如果没有显示，请查看源地址http://jsfiddle.net/ihardcoder/HNduT/2/）所示，基本的效果是在点击“Translate”按钮后，蓝色区域透明度变为0，然后隐藏display:none；点击Reset按钮后，首先显示蓝色区域display:block，然后透明度逐渐恢复至1，代码如下： 1 var btn1 = $("#testbtn1"); 2 var btn2 = $("#testbtn2"); 3 var container = $("#containe
为了充分发挥 GPU 算力，需要尽可能多的将任务交给 GPU 执行，现在有一个任务数组，数组元素表示在这 1s 内新增的任务个数，且每秒都有新增任务。假设 GPU 最多一次执行 n 个任务，一次执行耗时 1s，在保证 GPU 不空闲的情况下，最少需要多长时间执行完成。
由于业务关系，有幸参与腾讯课堂app下载页面制作，原则上ie8、9可表现为静态版本，而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下，以供知识积累及讨论交流。 区分浏览器 既然要实
由于业务关系，有幸参与腾讯课堂app下载页面制作，原则上ie8、9可表现为静态版本，而高级浏览则为动画版本。在这把一些重要思想和中间遇到的一些问题记录下，以供知识积累及讨论交流。
为了充分发挥GPU算力， 需要尽可能多的将任务交给GPU执行， 现在有一个任务数组， 数组元素表示在这1s内新增的任务个数， 且每秒都有新增任务， 假设GPU最多一次执行n个任务， 一次执行耗时1s， 在保证GPU不空闲的情况下，最少需要多长时间执行完成。
为了加强浏览者的体验,不在等待页面加载时感到枯燥，从而关闭网页，很多网站都会制作一个“网页正在加载中”的提示效果或显示加载进程，加载完成后提示消失，大部分都应用在网站的首页，今天我教大家把这一特效添加到Emlog主题中。要实现该特效同样要用到jquery，如果大家和我目前用的主题一样，为了实现其它特效已提前加载了jquery，那么正好充分利用jquery的强大功能，添加此特效何乐而不为呢？当然仅仅为了实现这个特效，而去加载50几K的jquery就有点得不偿失了。
JavaScript闭包，是JS开发工程师必须深入了解的知识。3月份自己曾撰写博客《JavaScript闭包》，博客中只是简单阐述了闭包的工作过程和列举了几个示例，并没有去刨根问底，将其弄明白！
今天项目中需要跨浏览器地播放视频，在网上找了一下，找到了video.js，记录一下video.js的简单用法。 <html> <head> ... <link rel="stylesheet" type="text/css" href="css/video-js.css" /> ... <script type="text/javascript"> document.createE
在koa官网有说明在ctx挂载了一系列request和response的属性别名。
“ 关注 前端开发社区 ，回复 '领取资源'，免费领取Vue，小程序，Node Js，前端开发用的插件以及面试视频等学习资料，让我们一起学习，一起进步
定时器的用法非常之普遍，一般动态变化的效果都会用到定时器；定时器分为setTimeout和setInterval 下面是方法和描述
less是css预编译语言，和其类似的预编译器还有: sass， stylus等，所谓的预编译，其实是把css这种标记语言按照面向对象（编程语言的方式）进行编写（有变量，函数，判断等操作），但是这种写法浏览器是不能正常识别的，需要我们把其再编译为正常的css代码才可以。
某天设计师来找我说，“这个心愿牌傻傻地挂在那不好看，加个动效呗，就左右摆动一下就行，很简单的！”，我一想，行呀，提升用户视觉体验，开搞。
前言 以前说起前端动画必须使用JS，而CSS3为我们带来transition和@keyframes，让我们可以以更简单（声明式代替命令式）和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结，欢迎各位拍砖。 属性介绍 首先先我们简单粗暴了解transition属性吧！ transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>;
以前说起前端动画必须使用JS，而CSS3为我们带来transition和@keyframes，让我们可以以更简单（声明式代替命令式）和更高效的方式实现UI状态间的补间动画。本文为近期对Transition的学习总结，欢迎各位拍砖。
今天来说下CSS3动画，目标是让一个方块做抛物线运动。主要用到的CSS3属性有animation，transform，@keyframes，transition等。 ---- Animation版-0 我们先建立一个HTML文件，test.html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="animation.css"/> </head> <body> </d07
CSS3动画执行起来平滑且快速，但不像JavaScript动画，你可以一帧一帧控制。幸运的是，你可以在任何一个元素上使用事件处理来决定动画的状态。同时它支持连续播放不同动画这种细粒度的控制。
1、存数据：最开始想着一级菜单存一个数组，二级菜单存不同的数组。那么问题来了，一级菜单和二级菜单应该是超级相关联的，如果分开存储再去建立关系很麻烦，所以存在一个数组对象中，那么也就是说，不管多少级菜单都可以这样，又方便还不需要我们自己去建立相关关系。
埋点统计在我们业务里经常有遇到，或者很普遍的，我们自己网站也会加入第三方统计，我们会看到动态加载方式去加载jsdk,也就是你常常看到的insertBefore操作，我们很少考虑到为什么这么做，直接同步加载不行吗？统计代码会影响业务首屏加载吗？同步引入方式，当然会，我的业务代码还没加载，首屏就加载一大段统计的jsdk,在移动端页面打开要求比较高的苛刻条件下，首屏优化，你可以在埋点统计上做些优化，那么页面加载会有一个很大的提升，本文是一篇笔者关于埋点优化的笔记，希望看完在项目中有所思考和帮助。
因为渲染引擎可以通过跳帧（frame-skipping）及其它技术来确保性能尽量流畅
Animate 通过CSS3封装的一个css插件 wow.js 可以链接到CSS动画库 两者配合起来可以快速制作你的网页特效
如果你有一个这样的场景，b依赖于a，c依赖于b，那么我们只能通过promise then的方式实现。这样的的可读性就会变得很差，而且不利于流程控制，比如我想在某个条件下只走到 b 就不往下执行 c 了，这种时候就变得不是很好控制！
最开始在陌小雨那就看到了这个功能，觉得挺好玩，但是也没想继续深入。昨天在无主题博客看到他分享了这个功能的代码之后，觉得可以试试。 用了之后，发现他改进之后的代码存在几个缺憾： ①、他加入了随机播放功能，但是多次点击启动，将出现多首歌曲叠加播放 BUG(嗨过头了)； ②、这个功能一旦启用，就必须刷新页面来停止，否则得等到歌曲播放完成才会停止“颤抖”； ③、如果用了 CDN，那么 js 会托管到 CDN，新增或更改歌曲就变得非常麻烦，因为缓存刷新很蛋疼； ④、启动之后，高潮来得有点慢，15.5s 才会看到
但是第2种方式，当调用的接口响应时间大于1s时，得到的响应时间是不准确的。下面来看示例
博客新增菜单后，点击新菜单后其中的js不生效，刷新页面后才生效，这个页面是通过标签跳转过来的。下面上我的代码
当下CSS3应用已经相当广泛，其中重要成员之一就是CSS3动画。并且，随着CSS动画的逐渐深入与普及，更复杂与细腻的动画场景也如雨后春笋般破土而出。例如上个月做的「企业QQ-新年祝福」活动： 感谢sh
大家好，关于惊艳的 Hero Header（不知怎么翻译，暂且这么叫吧） 的动效大家见过不少，在页面打开后的瞬间，好的 Hero Header 动效会给用户留下好的印象，如何抓住用户的第一印象呢。从设计角度方面来说，好的 Hero Header 都有以下要素：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
