How to change the text smoothly?

Question

I am using Bootstrapdialog and I have to change the text frequently, I would like a tip on how to treat this, follow the example:

$(document).ready(function() {

  Janela = new BootstrapDialog.show({

    message: 'Primeira mensagem<br><br><br>',
    
    buttons: [{
      label: 'Troca mensagem',
      cssClass: 'btn-primary',
      action: function(dialogRef) {

        dialogRef.getModalBody().html('Segunda mensagem');

      }
    }, {
      label: 'Close',
      id: 'btnfechar',
      action: function(dialogRef) {
        dialogRef.close();
      }
    }]
  });

});

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>

When the message sizes are different the dialog gives an ugly break, I wanted to make this transition more smoothly, for this the dialog would have to increase or decrease smoothly also

Answer 1

How about a fadein / fadeOut to make the transition less aggressively:

$(document).ready(function() {

  Janela = new BootstrapDialog.show({

    message: 'Primeira mensagem<br><br><br>',
    
    buttons: [{
      label: 'Troca mensagem',
      cssClass: 'btn-primary',
      action: function(dialogRef) {

        var bodyEl = dialogRef.getModalBody();

        bodyEl.fadeOut(function() {
          $(this).text("Segunda mensagem")
        }).fadeIn();

      }
    }, {
      label: 'Close',
      id: 'btnfechar',
      action: function(dialogRef) {
        dialogRef.close();
      }
    }]
  });

});

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>