2016-11-03 11 views
0

私はテストの.aspxページを作成して、トランスフォームが別のプロジェクトに必要かどうかを判断しています。CSSトランスフォームが.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/

ここで動作しない理由は何ですか?

答えて

0

divTestスタイルは表示:なしルールです。それは常に隠されています。 このルールを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);  
} 
0

私がこれをロードしていたサイトはIEの互換性ビューにありませんでした。一度それをオフにして、それは働いた。

関連する問題