Форум

yaparoff · #1 (**permalink**) 22.01.2019, 15:11

При наведении на стрелку вправо блок должен плавно передвигаться.
Сейчас перемещение работает, но блок передвигается не плавно
Как сделать чтобы шло плавно?
https://codepen.io/anon/pen/OdJZEp

рони · #2 (**permalink**) 22.01.2019, 15:22

yaparoff,
https://learn.javascript.ru/animation
timer надо обнулять. может css?

рони · #3 (**permalink**) 22.01.2019, 15:51

yaparoff,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .table-container {
  position: relative;
  width: 800px;
  border: 1px solid #000;
  margin: 0 auto;
  overflow: hidden;
}

.table {
  width: 1500px;
  background-color: lightblue;
  height: 500px;
  line-height: 30px;
  padding: 20px;
}

.table-arrow {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  cursor: pointer;
  background-color: #000;
  color: #fff;
  line-height: 50px;
}
.table-arrow--left {
  left: 0;
}
.table-arrow--right {
  right: 0;
}

  </style>


</head>

<body>
<div class="table-container">
  <div class="table">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ipsam aliquam rerum eius dicta laboriosam non quas, facere iure sapiente fugiat, blanditiis cumque illum libero, aspernatur ducimus minus reiciendis. Quis?
    Quae enim voluptate quidem voluptates delectus nemo laudantium atque dolores sunt odio dolorum numquam earum eius mollitia, sed recusandae. Voluptatibus accusantium maxime quis amet quod rerum animi tenetur hic illo.
    Asperiores a possimus fugiat enim amet nostrum, dolorem harum. Ullam sit sint ut dolores aliquid velit maxime debitis accusamus at, ipsum vitae voluptatem atque facere eius temporibus doloribus ratione non.
    Facere, aperiam! Repellat quaerat, hic facilis perferendis eligendi quam optio quia minima saepe officia excepturi aliquid? Harum, voluptatum neque laudantium explicabo ipsa, doloremque officia qui ipsum quas adipisci aspernatur nemo.
    Dicta quaerat veritatis expedita fuga obcaecati architecto labore non sit! Ipsa molestiae porro aliquid ea! Dolores fugiat repudiandae fuga unde placeat ex eveniet nisi esse amet, iusto, doloribus voluptatum eius.

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ipsam aliquam rerum eius dicta laboriosam non quas, facere iure sapiente fugiat, blanditiis cumque illum libero, aspernatur ducimus minus reiciendis. Quis?
    Quae enim voluptate quidem voluptates delectus nemo laudantium atque dolores sunt odio dolorum numquam earum eius mollitia, sed recusandae. Voluptatibus accusantium maxime quis amet quod rerum animi tenetur hic illo.
    Asperiores a possimus fugiat enim amet nostrum, dolorem harum. Ullam sit sint ut dolores aliquid velit maxime debitis accusamus at, ipsum vitae voluptatem atque facere eius temporibus doloribus ratione non.
    Facere, aperiam! Repellat quaerat, hic facilis perferendis eligendi quam optio quia minima saepe officia excepturi aliquid? Harum, voluptatum neque laudantium explicabo ipsa, doloremque officia qui ipsum quas adipisci aspernatur nemo.
    Dicta quaerat veritatis expedita fuga obcaecati architecto labore non sit! Ipsa molestiae porro aliquid ea! Dolores fugiat repudiandae fuga unde placeat ex eveniet nisi esse amet, iusto, doloribus voluptatum eius.
  </div>
  <div class="table-arrow table-arrow--right">вправо</div>
  <div class="table-arrow table-arrow--left">влево</div>
</div>
 <script>
const tableArrowLeft = document.querySelector('.table-arrow--left');
const tableArrowRight = document.querySelector('.table-arrow--right');
const table = document.querySelector('.table');

function timer(b) {
    let c = true;
    return {
        stop: function() {
            c = false
        },
        play: function() {
            var d = performance.now();
            c = !0;
            requestAnimationFrame(function e(a) {
                a = (a - d) / b.duration;
                1 < a && (a = 1);
                let i = b.from + (b.to - b.from) * a | 0;
                b.elem.style.transform = 'translateX(' + -i + 'px)';
                c && 1 == a && (d = performance.now());
                c && requestAnimationFrame(e)
            })
        }
    }
};

const anim = timer({
        from : 0,
        to : 700,
        duration: 7 * 1000,
        elem : table
    });


tableArrowRight.addEventListener('mouseenter', anim.play);
tableArrowRight.addEventListener('mouseleave', anim.stop);

</script>
</body>
</html>

yaparoff · #4 (**permalink**) 22.01.2019, 15:55

Сообщение от рони

yaparoff,
https://learn.javascript.ru/animation
может css?

точно попробовал css. Код проще и короче стал

yaparoff · #5 (**permalink**) 24.01.2019, 13:31

рони,
мне не очень понятен этот код с 77 по 87 строки

play: function() {
            var d = performance.now();
            c = !0;
            requestAnimationFrame(function e(a) {
                a = (a - d) / b.duration;
                1 < a && (a = 1);
                let i = b.from + (b.to - b.from) * a | 0;
                b.elem.style.transform = 'translateX(' + -i + 'px)';
                c && 1 == a && (d = performance.now());
                c && requestAnimationFrame(e)
            })
        }

можно как то попроще это расписать?
я попробовал написать это немного в своей реализации
но не до конца, т.к. не понимаю
https://codepen.io/anon/pen/ZwGjGg

рони · #6 (**permalink**) 24.01.2019, 16:20

yaparoff,
источник кода
https://learn.javascript.ru/js-animation

yaparoff · #7 (**permalink**) 25.01.2019, 16:35

рони,
прочитал
написал свою реализацию. Получилось как то так
https://codepen.io/anon/pen/JxYwbO?editors=1010
почему то после того как убираем мышь блок все равно продолжает двигаться какое то время

Также написал через setInterval
https://codepen.io/anon/pen/OdJZEp?editors=1010
и при событии mouseleave срабатывает clearInterval
но тут тоже блок продолжает двигаться какое то время

Видите, в том источнике написано время, при котором анимация будет работать, а мне нужно чтобы навел на стрелку - блок поехал, снова навел - блок продолжил движение (не с начала, а с того места где остановился)

Мне не понятно что означает переменная "с" в вашем коде. Для чего она служит?

function timer(b) {
    let c = true;
    return {
        stop: function() {
            c = false
        },
        play: function() {
            var d = performance.now();
            c = !0;
            requestAnimationFrame(function e(a) {
                a = (a - d) / b.duration;
                1 < a && (a = 1);
                let i = b.from + (b.to - b.from) * a | 0;
                b.elem.style.transform = 'translateX(' + -i + 'px)';
                c && 1 == a && (d = performance.now());
                c && requestAnimationFrame(e)
            })
        }
    }
};

рони · #8 (**permalink**) 25.01.2019, 16:55

Сообщение от yaparoff

переменная "с"

разрешение анимации или запрет

Malleys · #9 (**permalink**) 25.01.2019, 17:44

<div class="table-container" id="tbl">
	<div class="table">
		Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ipsamaliquam rerum eius dicta laboriosam non quas, facere iure sapiente fugiat, blanditiis cumque illum libero, aspernatur ducimus minus reiciendis. Quis?
		Quae enim voluptate quidem voluptates delectus nemo laudantium atque dolores sunt odio dolorum numquam earum eius mollitia, sed recusandae. Voluptatibus accusantium maxime quis amet quod rerum animi tenetur hic illo.
		Asperiores a possimus fugiat enim amet nostrum, dolorem harum. Ullam sit sint ut dolores aliquid velit maxime debitis accusamus at, ipsum vitae voluptatem atque facere eius temporibus doloribus ratione non.
		Facere, aperiam! Repellat quaerat, hic facilis perferendis eligendi quam optio quia minima saepe officia excepturi aliquid? Harum, voluptatum neque laudantium explicabo ipsa, doloremque officia qui ipsum quas adipisci aspernatur nemo.
		Dicta quaerat veritatis expedita fuga obcaecati architecto labore non sit! Ipsa molestiae porro aliquid ea! Dolores fugiat repudiandae fuga unde placeat ex eveniet nisi esse amet, iusto, doloribus voluptatum eius.

		Lorem ipsum dolor sit amet consectetur adipisicing elit. Error ipsam aliquam rerum eius dicta laboriosam non quas, facere iure sapiente fugiat, blanditiis cumque illum libero, aspernatur ducimus minus reiciendis. Quis?
		Quae enim voluptate quidem voluptates delectus nemo laudantium atque dolores sunt odio dolorum numquam earum eius mollitia, sed recusandae. Voluptatibus accusantium maxime quis amet quod rerum animi tenetur hic illo.
		Asperiores a possimus fugiat enim amet nostrum, dolorem harum. Ullam sit sint ut dolores aliquid velit maxime debitis accusamus at, ipsum vitae voluptatem atque facere eius temporibus doloribus ratione non.
		Facere, aperiam! Repellat quaerat, hic facilis perferendis eligendi quam optio quia minima saepe officia excepturi aliquid? Harum, voluptatum neque laudantium explicabo ipsa, doloremque officia qui ipsum quas adipisci aspernatur nemo.
		Dicta quaerat veritatis expedita fuga obcaecati architecto labore non sit! Ipsa molestiae porro aliquid ea! Dolores fugiat repudiandae fuga unde placeat ex eveniet nisi esse amet, iusto, doloribus voluptatum eius.
	</div>
	<button class="table➡">&#129146;</button>
	<button class="table⬅">&#129144;</button>
</div>
<style>
	
	.table-container {
		position: relative;
		width: 800px;
		border: 1px solid #000;
		margin: 0 auto;
		overflow: hidden;
	}

	.table {
		width: 1500px;
		background-color: lightblue;
		left: 0;
		height: 500px;
		line-height: 30px;
		padding: 20px;
/*		transition: transform 5s cubic-bezier(0, 0, 1, 1);*/
	}

	.table⬅,
	.table➡ {
		all: unset;
		position: absolute;
		top: 50%;
		text-align: center;
		transform: translate(0, -50%);
		width: 50px;
		height: 50px;
		cursor: pointer;
		background-color: black;
		color: white;
	}

	.table⬅ {
		left: 0;
	}

	.table➡ {
		right: 0;
	}

</style>

<script>
	
	class My {
		constructor(root) {
			this.root = root;
			this.table = root.querySelector(".table");
			this.arrowRight = root.querySelector(".table➡");
			this.arrowLeft = root.querySelector(".table⬅");
			
			this.x = 0;
			
			for(const element of [this.arrowRight, this.arrowLeft]) {
				element.addEventListener("pointerover", this.pointerOverHandler.bind(this));
				element.addEventListener("pointerout", this.pointerOutHandler.bind(this));
			}
		}
		
		pointerOverHandler({ target }) {
			console.log(target);
			if(target === this.arrowLeft ) { this.target = 0;    } else
			if(target === this.arrowRight) { this.target = -this.table.offsetWidth + this.root.offsetWidth; } else return;
			
			this.isOver = true;
			this.loop();
		}
	
		pointerOutHandler() {
			this.isOver = false;
		}
	
		loop() {
			if(!this.isOver) return;

			this.update(this.target);
			this.table.style.transform = `translateX(${this.x}px)`;
			requestAnimationFrame(this.loop.bind(this));
		}
	
		update(target) {
			this.x = 0.95 * this.x + 0.05 * target;
		}
	
	}
	
	new My(tbl);

</script>

рони · #10 (**permalink**) 25.01.2019, 18:29

Malleys,
как вариант ...

loop() {
            this.isOver = Math.abs(this.target - this.x)  > 1;
			if(!this.isOver) return;
			this.update(this.target);
			this.table.style.transform = `translateX(${this.x}px)`;
		   	requestAnimationFrame(this.loop.bind(this));
		}

Форум

Справочник

Discord чат

Курсы javascript