Запустить преобразование CSS в позиции мыши
Я просто хочу, чтобы преобразование началось с позиции щелчка мыши.
Не работает (как я и ожидал). Почему бы и нет и что мне следует изменить?
var x, y;
const hint = document.getElementById('hint');
const pageOverlay = document.getElementById('pageOverlay');
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("click", (e) => {
console.info('clicked at ' + x + ', ' + y);
hide(hint);
expand(pageOverlay);
});
document.onmousemove = function (e) {
x = e.clientX;
y = e.clientY;
};
});
function hide(elm) {
elm.setAttribute("style", "visibility: hidden; opacity: 0");
}
function expand(elm) {
elm.setAttribute("style",
"transform-origin:" + x + "px " + y + "px;" +
"visibility: visible;" +
"opacity: 1;" +
"transform: scale(1)");
}.pageOverlay {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: lightblue;
opacity: 0;
visibility: hidden;
transition: 0.8s linear;
transform: scale(.2);
}<span id = "hint">Click somewhere!<br/><br/>
I want/expect the transformation to start at the mouse position.</span>
<div id = "pageOverlay" class = "pageOverlay">
<h1>Overlay</h1>
</div>@Steffen: Как я уже писал. Там, где вы щелкаете, я хочу, чтобы наложенный div расширялся (масштаб от 0,2 до 1).
Правильно ли я понимаю, что оверлей должен расти из того места, где пользователь нажал, или как выглядит предполагаемый результат?
Учитывая то, как вы расположили элемент, я не думаю, что это сработает, просто изменив источник преобразования. Если я правильно понял, как именно вы хотите, чтобы это вело себя (тоже не совсем уверен), то я думаю, вам придется сначала позиционировать элемент по координатам щелчка (вероятно, по центру вокруг этого x/y), а затем выяснить, где установить начало координат так, чтобы при расширении из этой начальной позиции при конечном размере 100vh/100vh оно выглядело так, как если бы оно изначально было позиционировано в 0/0.
@CBroe, это может иметь смысл. Я попробую это, посмотрим, сработает ли это. Спасибо.
@CBroe, к сожалению, это не сработало. elm.setAttribute("style", "left: " + x + ";" + "top: " + y + ";" + "width: 100vw;" + "height: 100vh;" + "transform-origin:" + x + "px" + y + "px;" + "видимость: видимый;" + "непрозрачность: 1;" + "transform: масштаб(1)"); } Все равно начните преобразование с другой позиции (я думаю, 0,0).
@NoOorZ: Точно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Хорошо, я не совсем понимаю, чего вы хотите, но думаю, что понял. Проблема сохраняется, поскольку вы анимируете не только эффект масштабирования, но и изменение положения элемента. Если изменить свойство перехода на transition: transform 0.8s linear;, наложение мгновенно переместится, а затем начнет расширяться.
var x, y;
const hint = document.getElementById('hint');
const pageOverlay = document.getElementById('pageOverlay');
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("click", (e) => {
console.info('clicked at ' + x + ', ' + y);
hide(hint);
expand(pageOverlay);
});
document.onmousemove = function (e) {
x = e.clientX;
y = e.clientY;
};
});
function hide(elm) {
elm.setAttribute("style", "visibility: hidden; opacity: 0");
}
function expand(elm) {
elm.setAttribute("style",
"transform-origin:" + x + "px " + y + "px;" +
"visibility: visible;" +
"opacity: 1;" +
"transform: scale(1)");
}.pageOverlay {
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background: lightblue;
opacity: 0;
visibility: hidden;
transition: transform 0.8s linear;
transform: scale(.2);
}<span id = "hint">Click somewhere!<br/><br/>
I want/expect the transformation to start at the mouse position.</span>
<div id = "pageOverlay" class = "pageOverlay">
<h1>Overlay</h1>
</div>Я считаю, что @RWC, возможно, тоже неправильно смотрит на "transform-origin:" + x + "px " + y + "px;". Это исходная координата относительно трансформируемого объекта, как хорошо объяснено и показано здесь Developer.mozilla.org/en-US/docs/Web/CSS/transform-origin Итак, если вы нажмете на всю веб-страницу по адресу 1,1 анимация начнется с 1,1 внутри анимируемого элемента, а не с 1,1 страницы. Чтобы обеспечить соответствие эффекту трансформации, вам нужно будет использовать x,y щелчка, чтобы переместить элемент в эти x,y, а затем отметить звездочку transform-origin в фиксированном месте (например, «центр»).
@LuxZg Я тоже так думал, но элемент имеет размеры 100vw и 100vh, поэтому transform-origin перемещает его по экрану, хотя и не идеально. Если вы удалите transform: scale(1) из функции expand, вы увидите, что она перемещается.
Спасибо @Steffen Steffen, ваш фрагмент кода делает именно то, что я хотел, и ваше объяснение точное. Я думал, что Transform-Origin работает по-другому. С анимацией и трансформациями особо не занимался.
Вот демо: codepen.io/r-w-c/pen/QWRbrzB Страница будет содержать больше изображений, и если вы нажмете на изображение, вы как будто расширите это изображение. Я также хотел бы иметь эффект перекрестного затухания, но мне еще предстоит выяснить, как это сделать. Определенно не эксперт по CSS.
Как вы ожидаете, что это сработает?