作者superpai (超級白)
看板Web_Design
標題Re: [問題] 現在CSS3有被普遍使用嗎？
時間Fri Oct 11 15:37:57 2013
1F：→ superpai:我是說特效上。 10/11 11:33
2F：推 pm2001:jquery animate CSS怎麼取代? 10/11 11:36
3F：→ kurtisgod:Animate.css 10/11 11:45
4F：推 Telete:那像是廣告輪播 slider可以用CSS取代嗎@@ 10/11 11:47
5F：→ Telete:JSJQ真的好難啊啊~__~ 對完全沒程式基礎的人而言orz 10/11 11:48
6F：→ kurtisgod:carousel這東西還是乖乖用JS/JQ吧 而且CSS只會愈來愈程 10/11 11:51
7F：→ kurtisgod:式化 10/11 11:52
8F：→ danny8376:輪播還是用JS +1 用CSS來做說真的只會更複雜XD 10/11 12:32
9F：推 aspdoctor:過場動畫是可以完全用css3取代，只要客戶的電腦沒有IE67 10/11 13:04
10F：→ aspdoctor:89……所以還是用js比較快 10/11 13:04
剛好最近寫了兩種carousel的「特效」部分都是用CSS3寫的
而且都只用到transition，還沒用到animation
1.
https://www.biideal.com/ 首頁
2.
https://www.biideal.com/map/ 下面那條
用IE8/9開就可以看到如果沒有CSS3會會變成瞬間換圖
像2. 那個的CSS部分也很簡單，只有
.item {
position: relative;
-webkit-transition: 400ms all;
-ms-transition: 400ms all;
transition: 400ms all;
}
.next{
.ng-leave {
margin-left: 3px;
}
.ng-leave.ng-leave-active {
margin-left: -320px;
}
}
.prev{
.ng-enter {
margin-left:-320px;
}
.ng-enter.ng-enter-active {
margin-left:3px
}
}
只有這樣而已
所以CSS特效部分不難
比較困難的部分是DOM在進出的時候要加上對應的class
這本來就是JavaScript的工作不是CSS的事情
而jQuery是誕生在沒有CSS3的年代，所以覺得jQuery還是寫jQuery的animation
比較順是正常的
這邊建議用看看 animo-js
http://labs.bigroomstudios.com/libraries/animo-js
這樣應該會對寫CSS特效改觀一點
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 59.115.110.245
11F：→ danny8376:所以說要完全不JS會死人啊(當然實際上可達成) 10/11 16:10
12F：→ danny8376:另外 如果還要相容IE78(6先丟一旁) 那就是兩套做法 10/11 16:11
13F：→ danny8376: 9 10/11 16:12
14F：→ danny8376:不過輪播的特效純CSS3確實不難做是事實 10/11 16:13
15F：→ danny8376:不過要連輪播本身都用CSS3就會死人了XD 10/11 16:13