Web前端技术由 html、css 和 javascript 三大部分构成，是一个庞大而复杂的技术体系，其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入，然后不断地接触和学 ...

H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的，效果图如下所示，本文简单说一下其实现原理和主要思路。 实现原理 假设有5个页面，每个页面占屏幕100%宽，则创建一个DIV容器viewport，将其宽度 ...

transition是css最简单的动画。 通常当一个div属性变化时，我们会立即看的变化，从旧样式到新样式是一瞬间的，嗖嗖嗖！！！ 但是，如果我希望是慢慢的从一种状态，转变成另外一种状态，怎么办？ transition可以做到。 第一问：哪些属性值变化会触发这个transition ...

1、兼容性 根据canius（http://caniuse.com/#search=transition），transition 兼容性如下图所示： 在IE7-9进行测试时，transition的效果没有过渡效果（如线性过渡效果），但是还是有效果（立即执行 ...

　　在网页中用到图片轮播效果，单纯的隐藏、显示，那再简单不过了，要有动画效果，如果是自己写的话(不用jquery等)，可能要费点时间。css3的出现，让动画变得不再是问题，而且简单易用。下面介绍我用c ...

vue的过渡动画，主要是transition标签的使用，配合css动画实现的。官方文档css过渡 通过点击事件来切换show的值来改变显示的文本，下面的css通过进入离开时的在匀速状态下xxs（秒）下来转换在x轴上位移的距离， transition包括的是位移的内。key是必须有的，用来标记位移 ...

translate:移动，transform的一个方法 通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐 ...

很多网站都有那种图片渐入的效果，如：http://www.mi.com/minote/，这种效果用css3和一些js实现起来特别简单。 拿我之前做的页面来说一下怎么利用css3来实现图片渐入效果。 ...

　　把<router-view>嵌套在<transition>里，路由变化的时候，vue会为包裹页面的div增加动画样式，我们要做的就是监听路由变化、定义这些动画样式，以规定页面到底怎么切换。具体样式名通过transition的name属性绑定。下面是在移动端模拟一般app ...

　　相对于vue1.0来说，vue2.0的动画变化还是挺大的，在1.0中，直接在元素中加 transition ，后面跟上名字。而在vue2.0中，需要把设置动画的元素、路由放在<transition name="fade"></transition>中，name就是动画 ...