从下面的代码中可以看到,我正在尝试对对象feedbacksToShow应用组过渡。除非我尝试转换列表的最后一项,否则一切都很正常,这会溢出#feedback-list div容器。我不能在包含的div上使用overflow-hidden,因为我使用的工具提示会在悬停反馈项时从容器溢出(这部分代码在这里没有显示为无关紧要的)。我到处寻找答案,但没有成功。第一个任何形式的指导都将不胜感激
js4nwp541#
我也遇到过类似的问题,从过渡组中删除一个项目会导致所有项目向下移动,导致临时溢出和滚动条的出现和消失。当内容实际上比容器大时,我仍然希望我的容器是可滚动的,所以溢出:隐藏对我来说也没有好处。这种恼人的行为也可以在Vue文档的示例中重复。我使用的解决方法是在转换之前检查容器是否溢出。如果没有溢出,则在转换期间防止溢出。这非常适合我的情况,但是这意味着你的工具提示在转换过程中会被剪切。2如果你在转换过程中禁用了工具提示,它仍然可以为你工作(使用相同的beforeLeave和afterLeave)。当你的物品移动/褪色时,悬停工具提示通常看起来不太好。
<div ref="container"> <transition-group name="fade" @before-leave="handleBeforeLeave" @after-leave="handleAfterLeave"> ... </transition-group> </div> <script> export default { ... methods: { handleBeforeLeave(el) { const container = this.$refs.container // check if there was no overflow before the transition if (container.clientHeight === container.scrollHeight) { container.style.overflowY = "hidden" } if (container.clientWidth === container.scrollWidth) { container.style.overflowX = "hidden" } }, handleAfterLeave(el) { delete this.$refs.container.style.overflowX delete this.$refs.container.style.overflowY } } } </script>
1条答案
按热度按时间js4nwp541#
我也遇到过类似的问题,从过渡组中删除一个项目会导致所有项目向下移动,导致临时溢出和滚动条的出现和消失。当内容实际上比容器大时,我仍然希望我的容器是可滚动的,所以溢出:隐藏对我来说也没有好处。这种恼人的行为也可以在Vue文档的示例中重复。
我使用的解决方法是在转换之前检查容器是否溢出。如果没有溢出,则在转换期间防止溢出。这非常适合我的情况,但是这意味着你的工具提示在转换过程中会被剪切。2如果你在转换过程中禁用了工具提示,它仍然可以为你工作(使用相同的beforeLeave和afterLeave)。当你的物品移动/褪色时,悬停工具提示通常看起来不太好。