cuốn sách gpt4 ai đã làm

html - 在 CSS 中禁用转换的初始加载

In lại Tác giả: Walker 123 更新时间:2023-11-28 07:14:37 29 4
mua khóa gpt4 Nike

我正在尝试使用 :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 的位置固定在底部。

#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);
}

Some Text


Some Text


Some Text


Some Text


Some Text


Some Text


Some Text




Trigger

Close

câu trả lời hay nhất

要确保 #divID 在页面加载时隐藏,您可以使用 độ mờ đục 属性或类似属性使其透明。然后,您可以在按比例放大时立即使其可见。这将阻止向最终用户显示 #divID“关闭”的初始 0.3 秒动画。

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

关于html - 在 CSS 中禁用转换的初始加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32423928/

29 4 0
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress