Плавное перемещение блока
При наведении на стрелку вправо блок должен плавно передвигаться.
Сейчас перемещение работает, но блок передвигается не плавно Как сделать чтобы шло плавно? https://codepen.io/anon/pen/OdJZEp |
|
анимация на js
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>
|
Цитата:
|
рони,
мне не очень понятен этот код с 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 |
|
рони,
прочитал написал свою реализацию. Получилось как то так 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)
})
}
}
};
|
Цитата:
|
<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➡">🡺</button>
<button class="table⬅">🡸</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>
|
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));
}
|
| Часовой пояс GMT +3, время: 20:16. |