Question

我正在尝试使用：target和transform：scaleY（1）来设置div高度的动画。

所以简短版本是：

#divID { 
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.3s ease;
}
#divID:target { 
    transform: scaleY(1);
}

它正在发挥作用。但它最初在页面加载时缩小了div。所以我的问题是如何摆脱页面加载时转换的初始加载？

PS：我只想使用CSS / HTML。感谢。

编辑：我不知道它是否重要但divID的位置固定在底部。

＆＃13;

#divID { 
	-webkit-transform: scaleY(0);
	-o-transform: scaleY(0);
	-ms-transform: scaleY(0);
	transform: scaleY(0);

	-webkit-transform-origin: bottom;
	-o-transform-origin: bottom;
	-ms-transform-origin: bottom;
	transform-origin: bottom;

	-webkit-transition: -webkit-transform 0.3s ease-out;
	-o-transition: -o-transform 0.3s ease;
	-ms-transition: -ms-transform 0.3s ease;
	transition: transform 0.3s ease;
}
#divID:target { 
	-webkit-transform: scaleY(1);
	-o-transform: scaleY(1);
	-ms-transform: scaleY(1);
	transform: scaleY(1);
}

＆＃13;

<div id="divID">
  <p> Some Text </p>
  <p> Some Text </p>
  <p> Some Text </p>
  <p> Some Text </p>
  <p> Some Text </p>
  <p> Some Text </p>
  <p> Some Text </p>
</div>

<a href="#divID"><div id="trigger">Trigger</div></a>
<a href="#ddisable"><div>Close</div></a>

＆＃13;

Answer 1

要确保在页面加载中隐藏#divID，您可以使用opacity属性或类似属性使其透明。然后，您可以在缩放时立即使其可见。这将阻止您的#divID＆＃34;关闭＆＃34;从显示到最终用户。

#divID { 
    transform: scaleY(0);
    transform-origin: bottom;    
    transition: transform 0.3s ease;
    opacity: 0;
}
#divID:target { 
    transform: scaleY(1);
    opacity: 1;
}

禁用CSS中的初始转换加载

1 个答案: