Jump to content
Iskandar

Vue/jQuery Transition/Animation

Recommended Posts

Boa noite pessoal, minha dúvida é bem simples.

 

Queria saber como uso transitions/animations no Vue, sem precisar do v-if. Se é que é possível.

Em minha aplicação utilizo Vue com o Bootstrap e queria utilizar as animações nos menus Dropdown, tipo clica no botão e o dropdown aparece com alguma animação, em seguida ele some com outra animação.

 

Alguém sabe como?

 

Agradeço.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Matheus Bispo
      Boa tarde colegas programadores, estou com uma dúvida tremenda.
       
      Estou desenvolvendo um sistema para uma loja de veículos, e em uma parte do sistema, em cadastro de clientes, vai aparecer todos os clientes que ela possui em uma tabela(Usando DataTable do bootstrap), em cada cadastro, tenho um botão de editar, que imediatamente, abre uma janela modal com os dados daquele Cliente. Quando eu clico pela primeira vez em algum botão de Editar, ele me abre correto e o fechar é funciona normal. Agora vou clicar no editar novamente, porque anteriormente eu havia clicado no cliente errado, ele me traz os dados correto, mas o botão CANCELAR não funciona mais, preciso dar F5 para ele sumir. O que eu estaria fazendo de errado?
       
      Segue abaixo o meu código:
       
      <!DOCTYPE html>  
       <html>
            <head>  
                 <title>Clientes</title>
                 <link rel="shortcut icon" href="../assets/img/certi.png" type="image/x-icon" />
                 <form name="formulario" method="POST" action="">
                 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  
                 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />  
                 <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>  
                 <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>            
                 <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
                 <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
                     <!-- Include all compiled plugins (below), or include individual files as needed -->
                <script src="../assets/js/bootstrap.min.js"></script>
                <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script>
                <script src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.min.js"></script>
                <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.11/jquery.mask.min.js"></script>
                <script src="http://jquery-joshbush.googlecode.com/files/jquery.maskedinput-1.2.2.min.js"></script>
                <script type="text/javascript">
                  function Ir(pagina){
                    document.formulario.action = pagina
                    document.formulario.submit();
                  }
                </script>
            </head>  
      <body onselectstart="return false" oncontextmenu="return false" ondragstart="return false"
        onMouseOver="window.status='..message perso .. '; return true;">
                 <div class="container">
                     
                      <center> <img src='../assets/img/logo_clientes.jpg' class="img-responsive"> </center>
                      <br />
                  <?php
                     if(!empty($Dados["btnNovoCad"])):
                         $NovoCad = new CreateCliente();
                         unset($Dados["btnNovoCad"]);
                    $Dados["cli_garagem"] = $_SESSION["id-garagem"];
                         $NovoCad->exeCreate('clientes', $Dados);
                         echo $NovoCad->getMsg();
                     endif;
                     ?>
                      <div class="table-responsive">  
                           <table id="employee_data" class="table table-striped table-bordered">  
                                <thead>  
                                     <tr>  
                                          <td>ID</td>  
                                          <td>Nome</td>
                                          <td>Ações</td>
                                     </tr>  
                                </thead>
                                <?php
                                  $ChamarLeitura = new ReadCliente();
                                  $ChamarLeitura->LerClientes();
                                 foreach($ChamarLeitura->getResultado() as $clientes){
                                       extract($clientes);
                                     echo '  
                                     <tr>  
                                         <td>'.intval($cli_id).'</td>                                      
                                          <td>'.utf8_decode($cli_nome).'</td>
                                          ';?>
                                          <td>
                                              <button type="button" class="btn btn-xs btn-warning" data-toggle="modal" data-target="#myModalEdit" data-whatever="<?php echo $cli_id; ?>" data-whatevernome="<?php echo utf8_decode($cli_nome);?>">Editar</button>
                                          </td>                                   
                                     </tr>    
                                   <?php
                                  }  
                                ?>
                           </table>  
                      </div>  
                 </div><br>
              <center>
                  <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalNovo">Novo Cliente</button>
                  <button type="button" class="btn btn-primary" onClick="Ir('index');">Voltar ao Menu</button><br><br>
              </center>
       
      <!-- Inicio Modal Novo Cadastro -->
      <div class="modal fade" data-backdrop="static" id="myModalNovo">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="exampleModalLabel">Cadastrar Cliente</h3>
                </div>
                <div class="modal-body">
                  <form name="formularioB" method="POST" action="">
                        <div style="text-align: left;">
                           Nome:*
                           <input type="text" class="form-control" name="cli_nome" required="true" autofocus="true"><br>
                           *Campos obrigatórios
                        </div>
                    <div class="modal-footer">
                      <input type="submit" class="btn btn-success" name="btnNovoCad" value="Salvar">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                    </div>
                  </form>
                </div>        
              </div>
            </div>
          </div>
          <!-- Fim Modal -->
       
      <!-- Inicio Modal Editar Cadastro -->
        <div class="modal fade" id="myModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h3 class="modal-title" id="exampleModalLabel">Editar Cliente</h3>
                </div>
                <div class="modal-body">
                  <form name="formularioB" method="POST" action="">
                        <div style="text-align: left;">
                           Nome:*
                           <input type="text" class="form-control" name="cli_nome" id="cli_nome" required="true" autofocus="true"><br>
                        </div>
                    <div class="modal-footer">
                      <input type="submit" class="btn btn-success" name="btnEditCad" value="Salvar">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                      <input type="hidden" name="id-cliente" id="id-cliente" value="">
                    </div>
                  </form>
                </div>        
              </div>
            </div>
          </div>
          <!-- Fim Modal -->
       
        <script type="text/javascript">
          $('#myModalEdit').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget)
            var recipient = button.data('whatever')
            var recipientnome = button.data('whatevernome')
            var modal = $(this)
            modal.find('.modal-title').text('Editar Cliente')
            modal.find('#id-cliente').val(recipient)
            modal.find('#cli_nome').val(recipientnome)
            
          })
        </script>
         </form>
        </body>
       </html>  
       <script>  
       $(document).ready(function(){  
            $('#employee_data').DataTable();  
       });  
       </script>
    • By gersonab
      Boa tarde, tenho uma página de pesquisa com vários campos, podendo usar um apenas para pesquisa, fica a critério da pessoa, o que acontece é que todos os campos quando se faz o autocomplete ele envia a pesquisa pelo id, porém se eu enviar o campo em vazio o formulário envia assim mesmo a pesquisa, gostaria que só enviasse caso estivesse com o id.
      segue o formulário:
      <h4>Localizar por ...</h4> <form role="form" action="listcliente.php" method="GET" autocomplete='off'> <div class="form-row mb-4"> <div class="form-group col-md-12"> <label>Nome ou ...</label> <input type="text" name="nomec" id="nomec" class="form-control" style="text-transform: uppercase;"> <input type="hidden" name="idc" id="idc"> </div> </div> <div class="form-row mb-4"> <div class="form-group col-md-4"> <label>CPF ou ...</label> <input type="text" name="cpfc" id="cpfc" class="form-control"> </div> <div class="form-group col-md-4"> <label>CNPJ ou ...</label> <input type="text" name="cnpj" id="cnpj" class="form-control"> </div> <div class="form-group col-md-4"> <label>Data de nascimento</label> <input type="text" name="datan" id="datan" class="form-control"> </div> </div> <input type="submit" name="Localizar" value="Localizar" class="btn btn-primary mt-3"> </form> o autocomplete, apenas um de exemplo.
      $( "#nomec" ).autocomplete({ minLength: 2, source: function( request, response ) { $.ajax({ url: "../lista/autocli.php", type: 'post', dataType: "json", data: { search: request.term }, success: function( data ) { response( data ); } }); }, select: function (event, ui) { $('#nomec').val(ui.item.label); // display the selected text $('#idc').val(ui.item.value); // save selected id to input return false; } }); a página autocli.php
      <?php require_once('config.php'); if(isset($_POST['search'])){ $search = $_POST['search']; $query = "SELECT nomec, idc FROM cli WHERE nomec LIKE '%".$search."%'"; $result = mysqli_query($con,$query); $response = array(); while($row = mysqli_fetch_array($result) ){ $response[] = array("value"=>$row['idc'],"label"=>$row['nomec']); } echo json_encode($response); } exit; ?> desde já agradeço a ajuda.
    • By emmanuelsiqueira30
      Pessoal boa tarde.
      Gostaria de saber como posso pegar os valores da linha na tabela <table> que eu clicar no link visualizar dados na coluna opções e aparecer dados do banco daquela linha.
       
       
       
       
    • By gersonab
      Bom dia, tenho 2 tabelas editáveis em uma div, estas funcionam normalmente, o problema é que o loop não acontece , só carrega sobre 1 item, sendo que este eu posso ter mais itens.
       na página principal tenho:
      <div class="carregadados"></div> function fetch_data() { $.ajax({ url:"../lista/finan.php", method:"POST", success:function(data){ $('.carregadados').html(data); } }); } fetch_data(); a página a ser carregada esta assim:
      <?php session_start(); require_once('config.php'); $output = ''; $idc1=$_SESSION['idc']; $sql01 = "SELECT * FROM porcent WHERE idfcli='$idc1'"; $result = mysqli_query($con, $sql01); while($user41 = mysqli_fetch_array($result)){ // primeiro while onde seleciono os itens da pessoa podendo ter vários $output .= ' <div class="table-responsive mb-4 mt-4"> Aqui vem os dados da pessoa '; $id1= $user41["idproc"]; $sqladv = "SELECT * FROM poradv WHERE procav='$id1'"; $resulta = mysqli_query($con, $sqladv); $output .= ' <table class="table table-bordered table-hover table-striped" style="width:100%"> <thead> <tr> </tr> </thead> <tbody>'; if(mysqli_num_rows($resulta) > 0) { while($usera = mysqli_fetch_array($resulta)){ //segundo while onde tenho os dados de venda em uma tabela editavel $output .= ' <tr> </tr>'; } $output .= ' <tr> // insiro linhas caso precise </tr> '; } else { $output .= '<tr> // caso não tenha nada inserido, posso fazer por aqui </tr> '; } $output .= '</tbody> </table>'; $id2= $user41["idproc"]; $sql = "SELECT * FROM parcelas WHERE procid='$id2' ORDER BY datapar, idpar ASC"; $result = mysqli_query($con, $sql); $output .= ' <table class="table table-bordered table-hover table-striped" style="width:100%"> <thead> <tr> // tabela de pagamentos editavel </tr> </thead> <tbody>'; if(mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_array($result)) { //terceiro while , tabela referente a pagamentos $output .= ' <tr> // tabela pagamentos </tr>'; } $output .= ' <tr> // insiro linhas caso precise </tr> '; } else { $output .= '<tr> // caso não tenha nada inserido, posso fazer por aqui </tr> '; } $output .= '</tbody> </table> </div> '; } echo $output; ?> só esta carregando uma vez , tudo dentro da parte editável esta funcionando, porém no primeiro while só faz 1 loop, os demais estão funcionando perfeitamente.
      desde já agradeço qualquer ajuda.
    • By mamotinho
      Olá, gostaria de sabe como posso fazer uma contagem regressiva apartir de um registro em meu banco de dados eu tentei montar um código da seguinte forma:

       
      <? $DateGET = date('m/d/Y H:i A', strtotime($result->DateDiscount)); ?> <script> var valueDate = <?=$DateGET?>; var end = new Date(valueDate); var _second = 1000; var _minute = _second * 60; var _hour = _minute * 60; var _day = _hour * 24; var timer; function showRemaining() { var now = new Date(); var distance = end - now; if (distance < 0) { clearInterval(timer); document.getElementById("countdown").innerHTML = "EXPIRED!"; return; } var days = Math.floor(distance / _day); var hours = Math.floor((distance % _day) / _hour); var minutes = Math.floor((distance % _hour) / _minute); var seconds = Math.floor((distance % _minute) / _second); document.getElementById("countdown").innerHTML = "<span class='n_date day' id='days'>" + days + "</span><span class='date'>일</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time hour' id='hrs'>" + hours + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time minute' id='minus'>" + minutes + "</span>"; document.getElementById("countdown").innerHTML += "<span class='n_time second' id='secs'>" + seconds + "</span>"; } timer = setInterval(showRemaining, 1000); </script> Mais infelizmente não passou a data registrada no banco de dados, alguém teria ideia de como posso ta fazendo.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.