FLEX被内容撑开时，为何无法产生动画过渡?

冒牌公子 2020-02-25 08:39:17

例如下面这个例子,使用FLEX布局完成后发现，父级的FLEX BOX被显示内容撑开后，没有动画效果。加了时间也没用，请问高手怎么解决这样的问题？

...全文

331 1 打赏收藏转发到动态举报

写回复

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2020-02-25

打赏
举报

回复

css动画过渡必须要有明确的数值属性值变化才行。撑开的话height的值没变化，就没法过渡了。

前端 60 道面试题及答案.docx

需求描述有三块或以上的内容，鼠标移动上去时详情内容从下往上展现，鼠标移开时内容以相反动效隐藏。如下图所示↓ 需求分析如果用JS来写，那会非常的麻烦！这里运用fflex布局+transition，能够完美实现此动效，无需编写任何JS代码。美中不足是flex属性有些低版本的浏览器不支持。思路：父容器flex布局，子模块没个占比初始状态相同，当鼠标放上去时，修改这个值，模块撑开，使用transition设置css属性值的变化规则，即可看到模块逐渐拉伸和逐渐收缩的效果。至于模块里面的内容，同样使用这个策略，

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。行内元素添加绝对或者固定定位，可以直接设置高度和宽度块级元素添加绝对或者固定定位，如果不给高度和宽度，默认的大小的内容的大小。浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕效果的，文字会围绕浮动元素。子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子。浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字/图片。

// 以下两个与enter相关的方法只会在元素由隐藏变为显示的时候才会执行 // el:指的是当前调用这个方法的元素对象 // done:用来决定是否要执行后续的代码如果不执行这个方法，那么将来执行完before执行完enter以后动画就会停止 beforeEnter: function (el) { el.style = "padding-left: 100px"; }, enter: ...

基本布局如下使用方法获取一个名为select的 DOM 元素，该元素将用于显示下拉框的选项。接下来，使用方法获取一个名为text的 DOM 元素，该元素将用于触发下拉框的显示。然后，为text元素添加一个focus事件监听器。当用户聚焦于该元素时，将执行以下操作：a. 将select元素的transition属性设置为none，以便在下一个步骤中准确计算元素的高度。b. 将select元素的height属性设置为auto。

61,128

社区成员

60,711

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章