作者sthermit ( )
看板Web_Design
标题[问题] 请问关於css3 2d转换的问题
时间Mon Feb 9 17:03:39 2015
刚才在研究css
发现css3有办法作出动画效果
就先练习2D的转换，参考了w3c上面的范例
目标是希望可以让div可以变长变短
这是我写的css
.accordion-content{
width:100%;
height:0px;
background:yellow;
transition:height 2s;
-moz-transition:height 2s; /* Firefox 4 */
-webkit-transition:height 2s; /* Safari and Chrome */
-o-transition:height 2s; /* Opera */
}
.accordion-content-hover{
height:200px;
}
可是刚才试过之後
发现跟我想像的不一样
DIV的高度没有改变，一直都固定显示
当触发改变的时候背景的黄色长度会慢慢变长到200px
可是我希望是整个都一起变化
请问应该怎麽修改？
谢谢各位
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 211.22.92.217
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1423472622.A.4E4.html
1F：→ taiwan08: 先确认是不是你打错 .accordion-content:hover 02/09 17:20
2F：→ crossdunk: :hover 02/09 17:23
其实没有打错！
因为hover的触发是在另一个物件，我是用jQuery去add class
东西也真的可以动作...只是有动作的只有背景颜色
做出来的结果向这位朋友一样，只是我希望可以连显示文字的区块也这样子
请问有方法吗？
※ 编辑: sthermit (58.114.184.93), 02/10/2015 00:00:54
4F：→ taiwan08: 其实我不懂你说的"整个都一起变化"是什麽东西有变化 02/10 00:12
5F：→ taiwan08: 以为要问的是CSS，结果连jquery都出现了 02/10 00:12
6F：→ taiwan08: 不把整个网页的原始码丢上来吗? 02/10 00:13
7F：推 aspdoctor: 因为你动的只有容器的高度，里面的东西当然就只是跟着 02/10 02:47
8F：→ aspdoctor: 容器一起满出来，不知道你要的是什麽效果，如果跟我想 02/10 02:47
9F：→ aspdoctor: 的一样那可以搭配transform的scale跟translate来做到 02/10 02:47
10F：推 tw0517tw: 容器变大了 里面的东西没有变大阿 02/10 11:49