我正在编写一个测试 .aspx 页面以确定转换是否是另一个元素所需要的。
我试图通过使用变换 CSS 样式来显示/隐藏“divTest”。这是代码:
<%@ Page Language="VB" %>
<%@ Import Namespace="Ionic.Zip" %>
<%@ Import Namespace="System.IO" %>
<%@ Import Namespace="System.Web" %>
<head>
<style>
.shown {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.hidden {
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
</style>
</head>
<script runat="server">
Sub btnShow_Click(sender As Object, e As EventArgs)
divTest.Attributes.Add("class", "shown")
End Sub
Sub btnHide_Click(sender As Object, e As EventArgs)
divTest.Attributes.Add("class", "hidden")
End Sub
</script>
<html>
<body>
<form id="form1" runat="server">
<div id="divTest" runat="server" style="display: block" class="hidden">
Sample text in a div.
</div>
<div>
<asp:Button ID="btnShow" OnClick="btnShow_Click" runat="server" Text="Show"/>
<asp:Button ID="btnHide" OnClick="btnHide_Click" runat="server" Text="Hide"/>
</div>
</form>
</body>
</html>
我知道脚本和 html 中的所有内容都已经可以正常工作(我通过在相关 div 上添加其他测试类来测试按钮)。这是一个具有特定 CSS 样式的小 jsfiddle:http://jsfiddle.net/6TMcS/165/
它在这里不起作用的任何原因？
最佳答案
divTest 样式具有 display:none 规则。所以，它总是隐藏的。 将此规则移至 css 类。
.hidden {
display:none;
-webkit-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-moz-transform: translate(-100%, 0);
-ms-transform: translate(-100%, 0);
-o-transform: translate(-100%, 0);
transform: translate(-100%, 0);
}
关于html - CSS 转换在 .aspx 页面中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40404043/