javascript - vue 动画过渡 手风琴
问题描述
为什么实现不了手风琴?
<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就像养了一只宠物一样,把它养在水族箱里。 </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就像养了一只宠物一样,把它养在水族箱里。 </p></transition> </p> <script>new Vue({ el: '#app', data: {detail: false }}); </script></body></html>
相关文章:
1. docker容器呢SSH为什么连不通呢?2. 关docker hub上有些镜像的tag被标记““This image has vulnerabilities””3. docker网络端口映射,没有方便点的操作方法么?4. nignx - docker内nginx 80端口被占用5. debian - docker依赖的aufs-tools源码哪里可以找到啊?6. 前端 - ng-view不能加载进模板7. android clickablespan获取选中内容8. angular.js - angular内容过长展开收起效果9. python - from ..xxxx import xxxx到底是什么意思呢?10. angular.js - ng-grid 和tabset一起用时,grid width默认特别小
