您的位置：首页技术文章
文章详情页

javascript - vue 动画过渡 手风琴

浏览：192日期：2023-05-24 15:01:59

问题描述

为什么实现不了手风琴？

<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>

标签： JavaScript
上一条：javascript - angular2如何双向绑定多个checkbox？下一条：javascript - vue mounted 调用method方法后，method里的post报错。
相关文章：
1. dockerfile - [docker build image失败- npm install]2. nignx - docker内nginx 80端口被占用3. node.js - mongoDB使用$gte的问题4. java中关于直接插入排序遇到的问题。5. javascript - c#如何向js传值6. angular.js - angular内容过长展开收起效果7. java - mybatis怎么实现在数据库中有就修改,没有就添加8. node.js - nodejs和前端JavaScript 字符串处理结果不一样是什么原因？9. docker gitlab 如何git clone？10. 我在centos容器里安装docker，也就是在容器里安装容器，报错了？
排行榜
dockerfile - [docker build image失败- npm install]
dockerfile - [docker build image失败- npm install]
1. 我在centos容器里安装docker，也就是在容器里安装容器，报错了？
2. javascript - c#如何向js传值
3. nignx - docker内nginx 80端口被占用
4. node.js - mongoDB使用$gte的问题
5. angular.js - angular内容过长展开收起效果
6. node.js - nodejs和前端JavaScript 字符串处理结果不一样是什么原因？
7. java - mybatis怎么实现在数据库中有就修改,没有就添加
8. docker gitlab 如何git clone？
9. java中关于直接插入排序遇到的问题。
10. macos - mac下docker如何设置代理
热门标签