Форум

Булат Азат улы · #1 (**permalink**) 07.10.2017, 19:02

Здравствуйте. Делаю слайды, и в них передвигаю широоокий блок с помощью transform:translateX() по области блока, в котором он находится (т.е. остальные части скрыты с помощью свойства overflow: hidden).
Использую такую команду в яваскрипте:

$(выборка).css("transform", "translateX("+poz+"px)");
// poz - значение, числовой вид - конечное положение
// известно и первоначальное положение (например, pozFirst)

То есть, значение translateX = 0. При нажатии на "след.", или по истечении тайм-аута включается функция, в котором значение translateX вносится в переменную pozFirst.
И этой переменной добавляется ширина изображения (чтобы полностью перейти к другой), т.е.:

poz = pozFirst + imageWidth;

И пишется команда изменения стиля, которую написал выше.

Так вот, хотел бы сделать анимацию перехода. Пробовал так - не работает:

$(выборка).animate({transform: "translateX("+poz+"px)"},"slow");

С помощью анимации CSS (@keyframes) даже пробовать не стал - вообще не понятно, в .css() что куда вписывать. Да и примеров в интернете не нашел.
Помогите пожалуйста, как сделать подобную анимацию?

рони · #2 (**permalink**) 07.10.2017, 19:17

Сообщение от Булат Азат улы

хотел бы сделать анимацию перехода

https://javascript.ru/forum/misc/708...tml#post466557

рони · #3 (**permalink**) 07.10.2017, 19:20

Булат Азат улы,
может

<style type="text/css">   выборка{
    transition: 1s;
  }

  </style>

рони · #4 (**permalink**) 07.10.2017, 19:30

Булат Азат улы,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .hot{
         border: 1px dashed Gray; padding: 5px; height: 100px; width: 100px;
         background-color: rgba(139, 69, 19, 1);

    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
$.fn.Timer = function Timer(obj) {
        var def = {
            from: 5E3,
            duration: 5E3,
            to: 0,
            callback: null,
            step: function(now, fx) {
                $(fx.elem).css("transform", "translateX("+(now | 0)+"px)");
            }
        };
        var opt = $.extend({}, def, obj);
        return this.each(function(indx, el) {
            $(el).queue(function() {
                el.n = opt.from;
                $(el).dequeue()
            });
            $(el).animate({
                n: opt.to
            }, {
                easing: "swing",
                duration: opt.duration,
                step: opt.step,
                complete: opt.callback
            })
        })
    };

    $(".hot").Timer({from: 0,
            duration: 5000,
            to: 500})

});
  </script>
</head>

<body>
<style type="text/css">


  </style>
 <div class="hot"></div>

</body>
</html>

Булат Азат улы · #5 (**permalink**) 07.10.2017, 19:41

рони,
Спасибо огромное! Об этом даже не знал (думал, работает только на наведения мышью):

transition: 1s;

Всё очень красиво работает!!!

Форум

Справочник

Discord чат

Курсы javascript