javascript 如何使子元素在父元素转换和变换期间保持不变

kknvjkwl 于 12个月前发布在 Java

关注(0)|答案(1)|浏览(125)

x1c 0d1x的数据
如图所示，我得到了元素变化前后的坐标和尺寸，并用transform和scale实现了前后的变化，还用transition实现了动画效果。但我发现了一个问题，子元素也跟着变化了。
这段代码演示了一个相同的问题，因为原理是相同的。

.transform-scale {
  width: max-content;
  margin: 40px auto;
  padding: 20px;
  transition: transform .5s;
  background-color: #eeeeee;
}

.transform-scale:hover {
  transform: scale(3, 1);
}

.transform-scale:hover .transform-scale-kid {
  transform: scale(calc(1 / 3), 1);
}

.transform-scale .transform-scale-kid {
  font-size: 30px;
  transition: transform .5s;
}

个字符
我对子元素做了逆缩放，但是效果不太理想，我想知道有没有办法让子元素保持原来的大小。
如上面的代码片段所示。如何使.transform-scale-kid在过渡期间保持其原始大小

JavaScript

来源：https://stackoverflow.com/questions/77712666/how-to-make-child-elements-stay-the-same-during-parent-element-transition-and-tr

1条答案

按热度按时间

2o7dmzc51#

你想要实现的是不能用缩放来实现的，它会对它所应用的所有内容（内部）产生影响。同样的效果，而不会扭曲文本，可以这样做：

/*to convert the parent to a proper container:*/

.transform-scale {
  width: 100%;
  max-width: 600px;
  text-align: center;
}

/*style of the child:*/

.transform-scale-kid {
  font-size: 30px;
  width: 108px;
  margin: 40px auto;
  padding: 20px;
  background-color: #eeeeee;
  transition: width .5s;
}

/*style of the child on hover*/

.transform-scale:hover .transform-scale-kid {
  width: 325px;
}

个字符

赞(0）回复(0）举报 12个月前

我来回答

javascript 如何使子元素在父元素转换和变换期间保持不变

1条答案

相关问题

热门标签

最新问答