Question

当我出现并消失时，我正试图制作一个带动画的模态框我尝试过使用css3过渡。

HTML

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #444;
    width: 650px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    top: -300px;
    opacity: 0;
    -webkit-transition: top 5s, opacity 5s ; /* Safari */
    transition: top 5s, opacity 5s ;
}

.animatetop {
    top: 0;
    opacity: 1;
}

CSS

function close() {
    document.getElementById("modal").style.display="none";
    document.getElementById("modalcontent").classList.remove("animatetop");
}

function open() {
    document.getElementById("modalcontent").classList.add("animatetop");
    document.getElementById("modal").style.display="block";
}

JS

$(document).ready(function() {
var table = $('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'ajax.php',
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  if ( aData[2] == "true") {
    $('td:eq(2)', nRow).html( '<span class="ui green  label">Conectado</span>' ); 
  }
  if ( aData[2] == "false") {
    $('td:eq(2)', nRow).html( '<span class="ui red label">Desconectado</span>' ); 
  }
  if ( aData[1] == "true") {
    $('td:eq(1)', nRow).html( '<span class="ui red label">Bloqueado</span>'  ); 
  }
  if ( aData[1] == "false") {
    $('td:eq(1)', nRow).html( '<span class="ui green  label">Desbloqueado</span>' ); 
    }


},
"lengthMenu": [5, 10, 20, 25],
"language": {
  "search": "Busca rápida:",
  "emptyTable": "Desculpe, não há nada para mostrar.",
  "info": "Registro _START_ até _END_ de _TOTAL_ registros",
  "infoEmpty": "Nada foi encontrado em ",
  "infoFiltered": "um total de _MAX_ registros.",
  "lengthMenu": "Exibir _MENU_ registros",
  "processing": "<i class='notched circle loading icon'></i> Processando",
  "zeroRecords": "Desculpe, nada foi encontrado.",
  "paginate": {
    "first": "Primeiro",
    "last": "Último",
    "next": "Próximo",
    "previous": "Anterior"
  }
},
"columnDefs": [
  { 
      "targets": 3,
      "render": function(data, type, row, meta){
         return "<button class='ui icon button' data-toggle='modal' data-target='#myModal' onclick='teste()'><i class='options icon'></i></button>";  
      }
  }            
  ]     
  });


  });
  function teste() {
  $('.ui.modal')
  .modal({ detachable:false, observeChanges:true         }).modal('show').modal('refresh');
  }

    function myFunction() {

    $.ajax({
    url: 'api.php',
    type: 'POST',
    success: function(datas){
    var ctx = document.getElementById("myChart");
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
          labels: ["Desconexão", "Conexão"],
          datasets: [{
              label: '# Quantidade',
              data: [datas[1], datas[3]],
              backgroundColor: [
                  'rgba(255, 99, 132, 0.2)',
                  'rgba(54, 162, 235, 0.2)',
                  'rgba(255, 206, 86, 0.2)',
                  'rgba(75, 192, 192, 0.2)',
                  'rgba(153, 102, 255, 0.2)',
                  'rgba(255, 159, 64, 0.2)'
              ],
              borderColor: [
                  'rgba(255,99,132,1)',
                  'rgba(54, 162, 235, 1)',
                  'rgba(255, 206, 86, 1)',
                  'rgba(75, 192, 192, 1)',
                  'rgba(153, 102, 255, 1)',
                  'rgba(255, 159, 64, 1)'
              ],
              borderWidth: 1
          }]
      },
      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          }
      }
  });
}
  });
 }

这使得模态出现并消失但没有过渡。我做错了什么？

Answer 1

任何运行的css转换都取决于display:block或类似的可见元素。

通过电话在document.getElementById("modal").style.display="none";函数开始时close()，您可以立即将整个模态设置为完全隐藏，因此模态内容的转换无效。

同样在open()函数中，应用了转换类，但该元素被display:none隐藏，因此转换不会运行。

你应该尝试让转换运行，然后在延迟之后设置要隐藏的模态。

function close() {
    document.getElementById("modalcontent").classList.remove("animatetop");
    window.setTimeout(function(){
        document.getElementById("modal").style.display="none"; //hide modal after 5s delay
    }, 5000);
}

并且对于open，首先将模态设置为可见，然后添加过渡类：

function open() {
    document.getElementById("modal").style.display="block";    
    document.getElementById("modalcontent").classList.add("animatetop");    
}

Answer 2

更改display属性不会让浏览器执行动画。它立即起作用。即使使用transition: display也无济于事。

Css3 / Javascript转换不起作用

2 个答案: