Анимация CSS / переход не работает должным образом

ProgramBox

Анимация CSS / переход не работает должным образом

Post author:admin
Запись опубликована:7 ноября, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Вот без кода анимации / перехода проверьте это:

 <!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>

Развернуть фрагмент

и теперь это с кодом анимации / перехода: просто я добавил сюда только переход CSS для класса div, .resize{transition: 0.3s;} и я думаю, что он должен работать, но проблема в том, что это не работает с одним щелчком мыши, если я нажимаю один раз, текст font-size становится маленьким, а затем после второго щелчка он работает, в чем проблемапроблема, пожалуйста, проверьте это. я хочу работать с ним только одним щелчком мыши.

 <!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>

Развернуть фрагмент

Ответ №1:

Если вы проверите вычисленный размер шрифта, вы обнаружите некоторые проблемы:

Итак, я предполагаю, что, поскольку вы переносили все свойства CSS (установив transition: 0.3s , что вы не исключаете никаких изменений свойств), ширина .resize не будет составлять 600 пикселей к моменту вычисления нового размера шрифта. Попробуйте использовать более длительное время перехода, например, 2 секунды. Вероятно, вам потребуется более 2 кликов, чтобы получить окончательный размер шрифта. Если это произойдет, значит, вы нашли проблему.

Решением, если вы хотите также изменить ширину, было бы передать желаемую ширину (600 пикселей) fontResize() и не полагаться на ширину элемента HTML (которая будет меняться в течение .3 секунд).

Ответ №2:

Текст немедленно изменяет размер — проблема в том, что функция изменения размера принимает начальные размеры желтого прямоугольника в качестве мер для изменения размера, а не конечные размеры после завершения анимации. Таким образом, размер текста изменяется до того же размера, и вы не видите разницы.

Когда вы нажимаете кнопку, вы указываете тексту изменить размер до размера желтого прямоугольника. Но на данный момент желтый прямоугольник не полностью изменен, в основном текстовый элемент изменяется относительно начальных размеров желтого прямоугольника.

Чтобы убедиться в этом, вам нужно только применить setTimeout к текстовой анимации, и вы увидите, что если у желтого прямоугольника есть время для анимации, текстовый элемент будет анимироваться так, как вы ожидаете.

Чтобы понять, что я имею в виду, замените обработчик щелчка следующим кодом.

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

Итак, вы видите, что если вы дадите время для расширения прямоугольника, текст сможет получить от него большие размеры для расширения.

Но если вы жестко зададите окончательный размер шрифта, анимация начнется немедленно

Вместо:

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

Попробуйте:

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

Дело в том, что обязательно определите соответствующие размеры во время нажатия кнопки.

Ответ №3:

Добавьте следующее:

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

Вы запускаете fontResize() каждый раз, когда заканчивается переход, чтобы убедиться, что вы используете правильный 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>

Развернуть фрагмент

1. это все еще не решает мою проблему, пожалуйста, четко прочитайте вопрос

2. @RRSuthar вы сказали, что я хочу работать с ним только одним щелчком мыши. —> он работает одним щелчком мыши в моем коде

3. но много раз это не работает, посмотрите еще раз, пожалуйста

4. @RRSuthar ну, это так, вы заметили, что я использую случайную функцию?

5. @RRSuthar не могли бы вы уточнить, потому что я не совсем понимаю, что вы имеете в виду, а что не работает

Ответ №4:

Поскольку вы жестко кодируете конечную ширину в обработчике кликов, выполнив это $('#chartdiv').width(600) , вы также можете передать это в качестве параметра, который поможет вам изменить размер текста.

Вместо чего-то подобного:

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

Что-то более похожее на это:

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

Вот рабочий JSFiddle.

В моем примере все сразу анимируется в нужном месте.

Смотрите Комментарии, в которых я внес изменения:

 $.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
})