javascript - vue 動畫過渡 手風(fēng)琴
問題描述
為什么實現(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'>在紐約長島的一家餐吧里有一只132歲的大龍蝦。這只紐約最老的龍蝦名叫Louie，重22磅（約20斤），20年來，它一直生活在一家餐吧里，餐吧主人Butch Yamali就像養(yǎng)了一只寵物一樣，把它養(yǎng)在水族箱里。 </p></transition>data: { detail: false,}
問題解答
回答1：不知道你這里的是不是就是完整的代碼了，我對你的代碼稍作修改之后就能正常運行了。代碼的邏輯和CSS樣式寫得沒有問題。如果上面就是你的完整代碼，那上面的錯誤在于，你沒有掛載實例。
<!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'>在紐約長島的一家餐吧里有一只132歲的大龍蝦。這只紐約最老的龍蝦名叫Louie，重22磅（約20斤），20年來，它一直生活在一家餐吧里，餐吧主人Butch Yamali就像養(yǎng)了一只寵物一樣，把它養(yǎng)在水族箱里。 </p></transition> </p> <script>new Vue({ el: '#app', data: {detail: false }}); </script></body></html>
相關(guān)文章：
1. macos - mac下docker如何設(shè)置代理2. angular.js - ng-grid 和tabset一起用時，grid width默認(rèn)特別小3. apache - 本地搭建wordpress權(quán)限問題4. 熱切期待朱老師的回復(fù)，網(wǎng)頁視頻在線播放器插件配置錯誤5. docker 下面創(chuàng)建的IMAGE 他們的 ID 一樣？這個是怎么回事？？？？6. java - Spring Mvc全局異常處理器@ControllerAdvice不起作用？7. Whitelabel錯誤頁面發(fā)生意外錯誤（類型=未找到，狀態(tài)= 404）/WEB-INF/views/home.jsp8. javascript - web網(wǎng)頁版app返回上一頁按鈕在ios設(shè)備失效怎么辦？安卓上可以，代碼如下，請大神幫助，萬分感謝。9. Android下，rxJava+retrofit 并發(fā)上傳文件和串行上傳文件的效率為什么差不多？10. css3 - transition屬性當(dāng)鼠標(biāo)一開的時候設(shè)置的時間不起作用
網(wǎng)公網(wǎng)安備