花式使用CSS3 transition

DobbyKim 發布于2019-08-19 17:17 / 2071人閱讀

摘要：歡迎交換友鏈進擊的程序媛微博江小湖本文講介紹控制六種方法觸發，以及事件的使用。事件事件會在結束后觸發。有沒有漸變開始的事件目前只有有事件，目前未有此標準。

歡迎交換友鏈 Laker"s Blog--進擊的程序媛
Github：https://github.com/younglaker
微博: 江小湖Laker

本文講介紹:hover、:active、:focus、:checked、Media Queries、JavaScript控制六種方法觸發CSS3 transition，以及 transitionend 事件的使用。

:hover

最常見的是用hover：

:hover

.hover {
  width: 100px;
  height: 100px;
  background: #222;
  color: white;
  text-align: center;
  transition: all 2s ease;
}
.hover:hover {
  width: 200px;
  height: 200px;
}

Demo

:active

mousedown s時觸發：

:active

.active {
  width: 100px;
  height: 100px;
  background: #222;
  color: white;
  text-align: center;
  transition: all 2s ease;
}
.active:active {
  width: 200px;
  height: 200px;
}

Demo

:focus

文本框聚焦時（這個在很多網站的搜索框的動畫效果里用到）：


  


  


.focus input, .focus textarea {
  width: 200px;
  transition: width 1s ease;
}

.focus input:focus, .focus textarea:focus {
  width: 300px;
}

Demo

:checked

用于checkboxes 和 radio buttons 被選中時：


     Input 1

     Input 2

     Input 3

   Input 4


    
input[type="checkbox"]:checked {
  height: 20px;
  transition: all 1s ease;
}

input[type="checkbox"]:checked {
  width: 30px;
}

Demo

Media Queries

改變瀏覽器窗口大小時觸發：

media

.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;
  }
}

Demo

JavaScript事件觸發CSS3 transition

通過 JavaScript 或者 jQuery 添加、刪除class來完成動畫，CSS格式類似:hover。

例如：

以 click 事件為例，當點擊方塊時，變化長寬、背景色：

HTML:

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");
});

Demo

如果用原生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目前未有此標準。

云服務器 GPU云服務器花式 -transition transit Transition

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78368.html

SegmentFault 技術周刊 Vol.38 - 神奇的 CSS

摘要：層疊即表示允許以多種方式來描述樣式，一個元素可以被渲染呈現出多種樣式。可以讓屬性的變化過程持續一段時間，而不是立即生效。比如，將元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用后，將按一個曲線速率變化。 showImg(https://segmentfault.com/img/bVZwyL?w=900&h=385); CSS 的全稱是 Cascading Style Sheet...

elliott_hu 2019-08-29 13:56 評論0 收藏0
如何看源碼之Ruby China搜索框動畫實現

摘要：歡迎交換友鏈進擊的程序媛微博江小湖不要臉的自戀一下我覺得我看源碼的能力越來越強了，想看到搜索框動畫效果很不錯，想試著實現一下。例如只做了輸入框的顯示隱藏。但是看源碼沒有設置，有兩個屬性引起我的注意和，可以猜測這個動畫的實現由實現的漸變。歡迎交換友鏈 Lakers Blog--進擊的程序媛Github：https://github.com/younglaker微博: 江小湖Laker ...

cnsworder 2019-08-19 17:19 評論0 收藏0
如何看源碼之Ruby China搜索框動畫實現

摘要：歡迎交換友鏈進擊的程序媛微博江小湖不要臉的自戀一下我覺得我看源碼的能力越來越強了，想看到搜索框動畫效果很不錯，想試著實現一下。例如只做了輸入框的顯示隱藏。但是看源碼沒有設置，有兩個屬性引起我的注意和，可以猜測這個動畫的實現由實現的漸變。歡迎交換友鏈 Lakers Blog--進擊的程序媛Github：https://github.com/younglaker微博: 江小湖Laker ...

plus2047 2019-08-28 18:29 評論0 收藏0
css - 收藏集 - 掘金

摘要：絕對底部前端掘金來自國外的設計達人，純，可以實現當正文內容很少時，底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設計達人，純CSS，可以實現: 當正文內容很少時，底部位于窗口最下面。當改變窗口高度時，不會出現重疊問題。甚至，創造該CSS的人還專門成立一個網站介紹這個CSS底部布局方案...

phpmatt 2019-08-29 12:41 評論0 收藏0
前端面試之CSS3新特性

摘要：和這三個特性是新增的和動畫相關的特性。使用方式如下和變換類型可以有各種變換類型，即屬性值定義不進行轉換。設置列之間的寬度樣式和顏色規則和和用戶界面中，新的用戶界面特性包括重設元素尺寸盒尺寸以及輪廓等。除了html5的新特性，CSS3的新特性也是面試中經常被問到的。選擇器 CSS3中新添加了很多選擇器，解決了很多之前需要用javascript才能解決的布局問題。 element1~...

glumes 2019-08-29 12:53 評論0 收藏0