2016-11-03 4 views
0

테스트 .aspx 페이지를 작성하여 다른 프로젝트에서 변환이 필요한지 여부를 확인합니다..aspx에서 CSS 변환이 작동하지 않습니다. 페이지

변환 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의 모든 것을 (나는 문제의 사업부에 다른 테스트 클래스를 추가하는 버튼을 테스트)이 이미 작동하는지 알고 : 여기에 코드입니다. 다음은 특정 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의 호환성보기에 있습니다. 일단 내가 꺼 버리면 효과가있었습니다.

관련 문제