搜狗地图发布了新版的移动端地铁图，改版初衷是为了用户交互体验的提升以及性能的改善。原版地铁图被用户吐槽最多的是pinch缩放不流畅、无过渡动画、拖拽边界不合理等等，大体上都是交互体验上的问题。实际上原版的问题不仅仅存在于交互体验上，源代码也是一团糟： 无模块化概念； 存在冗余逻辑和文件； 滥用第三方 ...
分类：
其他好文 时间：
2018-05-18 11:43:59
阅读次数：
254
--旋转transform 2D rotate(edg)平面内旋转 translate(横向，纵向) scale(宽，高) skew(水平角度，垂直角度) 3D rotateX(edg) rotateY(edg)--过渡transition:3s 时间 不是hover加 是那个容器需要给那个容器加- ...
分类：
Web程序 时间：
2018-05-06 20:37:45
阅读次数：
235
在vue中实现过渡动画，需要用到transition把需要被动画控制的元素包裹起来 Toggle hello new Vue({ el: '#demo', data: { show: true } }) //fade-enter 这是一个时间点，是进入之前元素的起始状态，此时还没有进入 //fade... ...
分类：
其他好文 时间：
2018-04-21 23:36:54
阅读次数：
194
如何变成复合图层（硬件加速） 将该元素变成一个复合图层，就是传说中的硬件加速技术 最常用的方式：translate3d、translateZ opacity属性/过渡动画（需要动画执行的过程中才会创建合成层，动画没有开始或结束后元素还会回到之前的状态） will-chang属性（这个比较偏僻），一般 ...
分类：
其他好文 时间：
2018-03-21 13:45:40
阅读次数：
1385
30种炫酷CSS3鼠标滑过按钮动画特效效果演示：http://www.htmleaf.com/Demo/201510282718.html CSS3鼠标hover按钮过渡动画效果演示：http://www.htmleaf.com/Demo/201708104678.html 基于css3的各种新颖的 ...
分类：
Web程序 时间：
2018-03-21 11:40:08
阅读次数：
229
translate（tx,ty）; scale放大缩小 skew倾斜角度 rotate（a） 旋转 transition 过渡动画函数 触发机制 animation动画简介 设置关键帧 ...
分类：
Web程序 时间：
2018-03-20 00:51:55
阅读次数：
247
过渡模块和动画模块的区别：过渡动画需要人为的去触发这个反应，而动画模块不需要人为相同点：都是动画；都是系统新增的属性；都是要满足三要素才有动画效果三要素：1.告诉系统执行哪个动画，要写出动画名称；animation-name:名称; 2.告诉系统我们需要创建一个名称的动画； @keyframes 名... ...
分类：
Web程序 时间：
2018-03-17 00:36:11
阅读次数：
274
需要注意的是，使用伪类选择器：.class:hover:before； .class:hover:after ； 而不是 .class:before:hover .class:after:hover 这样的选择器是无效的。（过渡动画需要对浏览器进行兼容性适配的，这里仅仅是为了演示。） 实现效果： ...
分类：
其他好文 时间：
2018-03-15 11:23:37
阅读次数：
297
一、过渡 过渡效果一般由浏览器直接改变元素的CSS属性实现。 a、transition属性 transition 属性是一个简写属性，用于设置四个过渡属性： transition-property transition-duration transition-timing-function tran ...
分类：
Web程序 时间：
2018-02-25 19:08:38
阅读次数：
367
swipe.js的作用: 这是一个轻量级的移动滑动组件，支持触摸移动，支持响应式页面. 效果图： 代码： ...
分类：
Web程序 时间：
2018-01-15 22:41:48
阅读次数：
247
