Содержимое div (таблицы) не переходит должным образом - PullRequest
Новая
       12

Содержимое div (таблицы) не переходит должным образом

1 голос
/ 09 марта 2019

У меня есть таблица внутри div, и div - это модальное поле.Я пытаюсь заставить его постепенно исчезать (например, сделать видимым медленно либо с помощью опции видимости или непрозрачности), однако я могу получить фон div для перехода, но содержимое и таблица появляются сразу (вместо появления),Может кто-нибудь, пожалуйста, помогите мне, так как это сводит меня с ума!Спасибо. 

<div id="ModalDiv" runat="server" class="ModalStartupClose">
    <table id="customers" runat="server" class="customers">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Berglunds snabbköp</td>
    <td>Christina Berglund</td>
    <td>Sweden</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Königlich Essen</td>
    <td>Philip Cramer</td>
    <td>Germany</td>
  </tr>
</table>
</div>

Информация о css: 

.customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    opacity: 0;
    visibility: hidden;
}

.customers td, .customers th {
    border: 2px solid #ddd;
    padding: 8px;
    opacity: 0;
    color: red;
    visibility: hidden;
}

.customersOpen {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
    opacity: 1;
    color: blue;
    visibility: visible;
    transition: opacity 3s 2s, color 3s 2s, visibility 3s 2s;
}

    .customersOpen td, .customersOpen th {
        border: 2px solid #ddd;
        padding: 8px;
        opacity: 1;
        color: blue;
        visibility: visible;
        transition: opacity 3s 2s, color 3s 2s, visibility 3s 2s;
    }

    .customersOpen tr:nth-child(even) {
        background-color: #f2f2f2;
    }

    .customersOpen tr:hover {
        background-color: #ddd;
        transition: background-color 2s;
    }

    .customersOpen th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #4CAF50;
        color: white;
    }

И код, который только что содержится в кнопке, используя vb.net:

customers.Attributes("class") = "customersOpen"
...