CODEWITHSUNDEEP
javascripthtmljquerycss
RR Suthar
RR Suthar

Reputation: 653

CSS animation / transition not working properly

Here is without animation / transition code check this:

<!DOCTYPE html>
<html>
<head>
    <style>
        
    </style>

</head>
<body>
    <!DOCTYPE html>
<html>

<head>
  <style>
    .resize {
      font-size: 2.8vh;
      white-space: nowrap;
      color: black;
      background: yellow;
      cursor: move;
      width: 300px;
      height: 130px
    }
        
  </style>

</head>

<body>

  <button class="do-resize"  type="button" >Click Me!</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
  
  
  <div class="resize" id="chartdiv">Some name that is very long</div>


</body>

</html>
    <script type="text/javascript">
        $.fn.fontResize = function() {
  return this.each(function() {
    const $el = $(this);
    $el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
  });
}

$('button.do-resize').click(function(){
   $('#chartdiv').width(600).fontResize()// use plugin function
})


$('.resize').resizable({
  minWidth: 210,
  minHeight: 120,
  resize: function(event, ui) {   
    $(this).fontResize();// use plugin function
  }
});
    </script>
</body>
</html>

and now this is with animation / transition code: simply i have added here only CSS transition for div class .resize{transition: 0.3s;} and i think it should work, But problem is that this is not working with single click, if i click one time then text font-size goes small and then after second click it works, what is the problem plz check it. i want to work it with single click only.

<!DOCTYPE html>
<html>
<head>
    <style>
        
    </style>

</head>
<body>
    <!DOCTYPE html>
<html>

<head>
  <style>
    .resize {
      font-size: 2.8vh;
      white-space: nowrap;
      color: black;
      background: yellow;
      cursor: move;
      width: 300px;
      height: 130px
    }
    
    .resize{transition: 0.3s;}
    
  </style>

</head>

<body>

  <button class="do-resize"  type="button" >Click Me!</button>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">
  
  
  <div class="resize" id="chartdiv">Some name that is very long</div>


</body>

</html>
    <script type="text/javascript">
        $.fn.fontResize = function() {
  return this.each(function() {
    const $el = $(this);
    $el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
  });
}

$('button.do-resize').click(function(){
   $('#chartdiv').width(600).fontResize()// use plugin function
})


$('.resize').resizable({
  minWidth: 210,
  minHeight: 120,
  resize: function(event, ui) {   
    $(this).fontResize();// use plugin function
  }
});
    </script>
</body>
</html>

Upvotes: 1

Views: 162

Answers (4)

Antonio Brandao
Antonio Brandao

Reputation: 1452

Since you are hard-coding the final width in the click handler by doing $('#chartdiv').width(600), you might as well pass that as a parameter to help you resize the text.

Instead of something like this:

$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');

Something more like this:

$el.css('font-size', (parameter * parameter) / 2800 + 'px');

Here's a working JSFiddle.

In my example, everything will animate immediately to the right place.

See the comments where I made changes:

$.fn.fontResize = function(newSize) { // receive parameter
  return this.each(function() {
    $el = $(this)
    const halfSize = newSize/2  // divide width by 2
    $el.css('font-size', (halfSize * halfSize) / 2800 + 'px'); // apply in calculation
  });
}

$('button.do-resize').click(function(){
  const newSize = 600 // declare as const to use twice in next line
   $('#chartdiv').width(newSize).fontResize(newSize) // pass as parameter to fontResize
})

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272572

Add the following:

$('#chartdiv').on('transitionend', function () {
    $(this).fontResize()
});

You trigger the fontResize() each time a transition end to make sure you use the correct div.

$.fn.fontResize = function() {
  return this.each(function() {
    const $el = $(this);
    $el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');
  });
}

$('button.do-resize').click(function() {
  $('#chartdiv').width(Math.random()*600).fontResize() // use plugin function
})

$('#chartdiv').on('transitionend', function () {
    $(this).fontResize()
});

$('.resize').resizable({
  minWidth: 210,
  minHeight: 120,
  resize: function(event, ui) {
    $(this).fontResize(); // use plugin function
  }
});
.resize {
  font-size: 2.8vh;
  white-space: nowrap;
  color: black;
  background: yellow;
  cursor: move;
  width: 300px;
  height: 130px
}

.resize {
  transition: 0.3s;
}
<button class="do-resize" type="button">Click Me!</button>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/smoothness/jquery-ui.css">


<div class="resize" id="chartdiv">Some name that is very long</div>

Upvotes: 0

Antonio Brandao
Antonio Brandao

Reputation: 1452

The text is resizing immediately - the problem is that the resize function takes the initial dimensions of the yellow rectangle as the measures for the resizing - not the final dimensions after the animation completes. So the text is resizing to the same size and you see no difference.

When you click the button, you're telling the text to resize to the yellow rectangle's size. But the yellow rectangle isn't fully resized at this point, basically the text element is being resized relative to the initial dimensions of the yellow rectangle.

To verify this, you only have to apply a setTimeout to the text animation, and you'll see, that if the yellow rectangle has time to animate, the text element will animate as you expect it to.

To see the what I mean, replace the click handler with the following code.

$('button.do-resize').click(function() {
  $('#chartdiv').width(600)
  setTimeout(function() {
    $('#chartdiv').fontResize()
  }, 300)
})

So you see, if you give time for the rectangle to expand, the text will be able to get larger dimentions from it to expand.

But if you hardcode the final font size, the animation will start immediately

Instead of:

$el.css('font-size', ($el.width() * $el.height()) / 2800 + 'px');

Try:

$el.css('font-size','40px');

The point is, make sure to determine appropriate dimensions at the time of the button click.

Upvotes: 1

Eden Hernandez
Eden Hernandez

Reputation: 73

If you check the calculated font size you'll find some issues:

enter image description here

So my assumption is that, since you're transitioning all CSS properties (by setting transition: 0.3s you're not excluding any property change), the width of .resize is not 600px by the time you're calculating the new font-size. Try with a longer transition time, like 2 seconds. You will probably need more than 2 clicks to get the final font-size. If that happens, then you found the problem.

A solution, in case you want to transition also the width change, would be to pass the desired width (600px) to fontResize() and not rely on the HTML element width (which will be changing for .3 seconds).

Upvotes: 2

Related Questions