2016-11-03 5 views
0

Я пишу тестовую страницу .aspx, чтобы определить, является ли преобразование тем, что необходимо для другого проекта.Преобразование CSS, не работающее в .aspx Страница

Я пытаюсь показать/скрыть «divTest» с помощью CSS-стиля преобразования. Вот код:

  <%@ 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 в вопросе). Вот небольшой jsfiddle с конкретными стилями CSS: http://jsfiddle.net/6TMcS/165/

По какой причине он здесь не работает?

ответ

0

описание товара divTest style есть дисплей: нет правило. Таким образом, он всегда скрыт. Переместить это правило в класс 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. Как только я выключил это, это сработало.

Смежные вопросы