javascript - vue 動(dòng)畫過(guò)渡 手風(fēng)琴
問(wèn)題描述
為什么實(shí)現(xiàn)不了手風(fēng)琴？
<style> .collapse-enter{max-height: 0; } .collapse-enter-active {max-height: 10rem;-webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0); } .collapse-leave {max-height: 10rem; } .collapse-leave-active {max-height: 0;-webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0); }</style><h1 @click='detail = !detail'>Title</h1><transition name='collapse'> <p v-show='detail'>在紐約長(zhǎng)島的一家餐吧里有一只132歲的大龍蝦。這只紐約最老的龍蝦名叫Louie，重22磅（約20斤），20年來(lái)，它一直生活在一家餐吧里，餐吧主人Butch Yamali就像養(yǎng)了一只寵物一樣，把它養(yǎng)在水族箱里。 </p></transition>data: { detail: false,}
問(wèn)題解答
回答1：不知道你這里的是不是就是完整的代碼了，我對(duì)你的代碼稍作修改之后就能正常運(yùn)行了。代碼的邏輯和CSS樣式寫得沒(méi)有問(wèn)題。如果上面就是你的完整代碼，那上面的錯(cuò)誤在于，你沒(méi)有掛載實(shí)例。
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>collapse</title> <script src='http://cdn.staticfile.org/vue/2.0.3/vue.js'></script> <style>.collapse-enter{ max-height: 0;}.collapse-enter-active { max-height: 10rem; -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0); transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);}.collapse-leave { max-height: 10rem;}.collapse-leave-active { max-height: 0; -webkit-transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0); transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);} </style></head><body> <p id='app'><h1 @click='detail = !detail'>Title</h1><transition name='collapse'> <p v-show='detail'>在紐約長(zhǎng)島的一家餐吧里有一只132歲的大龍蝦。這只紐約最老的龍蝦名叫Louie，重22磅（約20斤），20年來(lái)，它一直生活在一家餐吧里，餐吧主人Butch Yamali就像養(yǎng)了一只寵物一樣，把它養(yǎng)在水族箱里。 </p></transition> </p> <script>new Vue({ el: '#app', data: {detail: false }}); </script></body></html>
相關(guān)文章：
1. python - 如何統(tǒng)計(jì)一份英文 API 開發(fā)文檔（如 javadoc文檔）的詞頻？2. mysql優(yōu)化 - mysql 一張表如果不能確保字段列長(zhǎng)度一致，是不是就不需要用到char。3. python - oslo_config4. 請(qǐng)教一個(gè)mysql去重取最新記錄5. python - 請(qǐng)問(wèn)這兩個(gè)地方是為什么呢？6. python - 為什么match匹配出來(lái)的結(jié)果是<_sre.SRE_Match object; span=(0, 54), match=’’>7. javascript - 按鈕鏈接到另一個(gè)網(wǎng)址 怎么通過(guò)百度統(tǒng)計(jì)計(jì)算按鈕的點(diǎn)擊數(shù)量8. 人工智能 - python 機(jī)器學(xué)習(xí) 醫(yī)療數(shù)據(jù) 怎么學(xué)9. php - 有關(guān)sql語(yǔ)句反向LIKE的處理10. 大家都用什么工具管理mysql數(shù)據(jù)庫(kù)？
網(wǎng)公網(wǎng)安備