迎接交流友链 Laker’s Blog–进击的顺序媛
Github:https://github.com/younglaker
微博: 江小湖Laker
本文讲引见:hover
、:active
、:focus
、:checked
、Media Queries
、JavaScript掌握
六种要领触发CSS3 transition,以及 transitionend
事宜的运用。
:hover
最常见的是用hover:
<div class="hover">:hover</div>
.hover {
width: 100px;
height: 100px;
background: #222;
color: white;
text-align: center;
transition: all 2s ease;
}
.hover:hover {
width: 200px;
height: 200px;
}
:active
mousedown s时触发:
<div class="active">:active</div>
.active {
width: 100px;
height: 100px;
background: #222;
color: white;
text-align: center;
transition: all 2s ease;
}
.active:active {
width: 200px;
height: 200px;
}
:focus
文本框聚焦时(这个在许多网站的搜刮框的动画结果里用到):
<div class="focus">
<input type="text" />
</div>
<div class="focus">
<textarea name="" id="" cols="30" rows="10"></textarea>
</div>
.focus input, .focus textarea {
width: 200px;
transition: width 1s ease;
}
.focus input:focus, .focus textarea:focus {
width: 300px;
}
:checked
用于checkboxes 和 radio buttons 被选中时:
<div>
<input type="checkbox" name="things" value="thing1"> Input 1<br>
<input type="checkbox" name="things" value="thing2"> Input 2<br>
<input type="checkbox" name="things" value="thing3"> Input 3<br>
<input type="checkbox" name="things" value="thing4"> Input 4<br>
</div>
input[type="checkbox"]:checked {
height: 20px;
transition: all 1s ease;
}
input[type="checkbox"]:checked {
width: 30px;
}
Media Queries
转变浏览器窗口大小时触发:
<div class="media">media</div>
.media {
width: 200px;
height: 200px;
background: #222;
color: white;
text-align: center;
transition: width 1s ease;
}
@media only screen and (max-width : 960px) {
.media {
width: 100px;
height: 100px;
}
}
JavaScript事宜触发CSS3 transition
经由过程 JavaScript 或许 jQuery 增加、删除class来完成动画,CSS花样相似:hover
。
比方:
以 click 事宜为例,当点击方块时,变化长宽、背景色:
HTML:
<div class="box"></div>
CSS:
.box {
width: 200px;
height: 200px;
background: black;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.box.clicked {
width: 300px;
height: 300px;
background: blue;
}
JavaScript:
$(".box").click(function() {
$(this).toggleClass("clicked");
});
假如用原生JavaScript,能够本身写个增加和删除类的函数。
transitionend 事宜
transitionend 事宜会在 CSS transition 完毕后触发。兼容Chrome、Firefox、Safari、IE10+:
element.addEventListener('transitionend', callback, false);
为保证低版本兼容性能够写webkitTransitionEnd(WebKit )、otransitionend(Opera)、MSTransitionEnd(IE 10+)、transitionend(Mozilla)。详见此议论。
有无渐变最先的事宜?现在只要IE 10+ 有 transionstart 事宜,W3C现在未有此规范。