→ superpai:我是說特效上。 10/11 11:33
推 pm2001:jquery animate CSS怎麼取代? 10/11 11:36
→ kurtisgod:Animate.css 10/11 11:45
推 Telete:那像是廣告輪播 slider可以用CSS取代嗎@@ 10/11 11:47
→ Telete:JSJQ真的好難啊啊~__~ 對完全沒程式基礎的人而言orz 10/11 11:48
→ kurtisgod:carousel這東西還是乖乖用JS/JQ吧 而且CSS只會愈來愈程 10/11 11:51
→ kurtisgod:式化 10/11 11:52
→ danny8376:輪播還是用JS +1 用CSS來做說真的只會更複雜XD 10/11 12:32
推 aspdoctor:過場動畫是可以完全用css3取代，只要客戶的電腦沒有IE67 10/11 13:04
→ 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
→ danny8376:所以說要完全不JS會死人啊(當然實際上可達成) 10/11 16:10
→ danny8376:另外 如果還要相容IE78(6先丟一旁) 那就是兩套做法 10/11 16:11
→ danny8376: 9 10/11 16:12
→ danny8376:不過輪播的特效純CSS3確實不難做是事實 10/11 16:13
→ danny8376:不過要連輪播本身都用CSS3就會死人了XD 10/11 16:13