使用 Velocity JS 点击更改位置和比例答案

【问题标题】：Change position and scale on click with Velocity JS使用 Velocity JS 点击更改位置和比例
【发布时间】：2018-09-13 04:31:48
【问题描述】：

我想做一个函数来缩放和改变按钮的位置。当您单击时，我希望它过渡到页面的绝对中心并缩放。搞不定，菜鸟来了！谢谢！

<div id="carousel" class="carousel">
    <a href="project.html" class="thumb" id="thumb">
        <div class="tbTitle">
            <h2>Diamonds and Pearls</h2>
            <div class="vid-holder"></div>
        </div>
        <video src="img/01.mp4" type="video/mp4" loop muted autoplay playsinline></video>
    </a>
</div>

CSS——

.thumb {
    position: relative;
    max-width: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 3.5em;
}

.huge-thumb {
    max-width: 1280px;
    position: fixed;
}

jQuery –

$('#thumb').on("click", function (ev) {
    ev.preventDefault();
    var scale = $("#thumb").height()/($("#huge-thumb").height() * 2);
    var toY = $("#thumb").offset().top - $("#huge-thumb").offset().top;  

    $.Velocity.animate($("#huge-thumb"), { translateY: toY, scaleX: scale, scaleY: scale, translateZ: 0 }, { delay: 1500, duration: 1050, easing: "easeInOutQuad" });
});

【问题讨论】：

您正在定位另一个页面来重定向浏览器。你怎么能在你离开的页面上看到动画？

标签： javascript jquery function velocity.js

【解决方案1】：

我不知道你在那里使用的是 Velocity V1 还是 V2，但由于 V1 在过时的轨道上，我将回答 V2 -

在 Velocity V2 中，您使用的各种属性不存在（它们在 css 中不存在，因此您不会丢失任何东西） - 但是它们是 transform 属性的值，因此您可以使用它们正确地代替。

您还使用了一些非常奇怪的方式来调用 Velocity，因此请尝试换行（为了清楚起见，换行）：

$("#huge-thumb").velocity({ transform: [ "translate(0," + toY + ") scale(" + scale + ")", "translate(0,0) scale(1)" ] }, { delay: 1500, duration: 1050, easing: "easeInOutQuad" });

Transform 本身有一些注意事项，所以这是使用强制馈送 - 数组中的第二行表示“从 0,0 移动，并从 1:1 缩放” - 这是变换的一般限制，因为浏览器没有实际上以它可以使用的格式告诉 Velocity 当前的转换是什么。

【讨论】：