再看transitionend事件
在去年,我写过《关于transitionend》一篇文章,说的是如何解决该事件在元素执行多个属性变化时的回调次数问题。今天又用到transitionend
事件,于是又想到了一种比较简单的解决方法。
删除transitionend事件
首先,再来看一下问题所在:Demo。
上面的例子中,当鼠标经过一个设置了CSS3动画的DIV添加了transitionend事件,这个元素在进行变化的时候同时改变了3个属性,即:width
、height
…
在去年,我写过《关于transitionend》一篇文章,说的是如何解决该事件在元素执行多个属性变化时的回调次数问题。今天又用到transitionend
事件,于是又想到了一种比较简单的解决方法。
首先,再来看一下问题所在:Demo。
上面的例子中,当鼠标经过一个设置了CSS3动画的DIV添加了transitionend事件,这个元素在进行变化的时候同时改变了3个属性,即:width
、height
…
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
译文不一定与原文内容完全相符,有我对其中的一些理解,但不会有太大的出入。
Flexbox
是一种更高效更灵活的布局方式,它可以让一些元素在一个容器里很容易的实现各种对齐以及控制这些元素之间的距离,即使这些元素的大小不固定(这也是它为什么叫flex
的原因)。
其实Flex
布局的主要思想是可以让容器去改变子元素的宽度、高度、顺序以及它们之间的距离等等(当然,这种布局方式针对不同的设备,不同分辨率都是起作用的)。Flex
盒子会根据有效的空间去扩展或收缩元素。
比较重要的一点是,…
给一个元素绑定事件后,再解除绑定,是一个比较常见的操作。
对于有名字的函数,这个操作在jQuery里很简单:
function doAlert(){ alert("fire!"); } var doc = $(document); doc.on("click",doAlert); doc.off("click",doAlert);
点击查看…
例如有一个文章列表:
<ul> class="arcList" <li><a href="#">#1</a></li> <li><a href="##">#2</a></li> <li><a href="###">#3</a></li> <li><a href="####">#4</a></li> <li><a href="#####">#5</a></li>
在写表单样式的时候是比较烦人的,因为各浏览器下的效果都不一样,所以在以前都会使用图片来进行解决,并且很多时候还需要JS的辅助。当然,那是为了兼容所有浏览器,但我们如果只需要兼容一些高级浏览器或者只需要考虑移动端的话,则不需要想这么多,因为CSS3是如此强大。
我想说什么呢?说不清楚只好先上demo了: