幾天來我一直試圖達到這種效果，但我不明白我可能做錯了什么，或者當我做這種類型的動畫時會發生什么。我想做的只是檢測手機的點擊或觸摸事件，并讓盒子上下移動。我查閱了一個項目實例，并逐字復制了它的功能，然而，我的盒子不能正確移動，它跳躍移動，而且不正確地一點也不平滑。

這是我的Vue組件:

<script lang="ts">
import Hammer from 'hammerjs';
import Vue from 'vue';

export default {
    data() {
        return {
            offset: 0,
            threshold: 0,
            isDragging: false,
        };
    },
    mounted() {
        this.setupHammer();
    },
    methods: {
        setupHammer() {
            const hammertime = new Hammer.Manager(this.$refs.post);

            hammertime.add(
                new Hammer.Pan({
                    threshold: this.threshold,
                    pointers: 0,
                    direction: Hammer.DIRECTION_VERTICAL,
                })
            );

            hammertime.on('pan', (event) => {
                this.offset = event.deltaY / this.$refs.post.clientHeight;
                console.log(this.offset);
            });

            hammertime.on('panstart', (event) => {
                this.isDragging =
                    event.offsetDirection === Hammer.DIRECTION_DOWN ||
                    event.offsetDirection === Hammer.DIRECTION_UP;
            });

            hammertime.on('panend', (event) => {
                this.isDragging = false;

                if (event.deltaY > 200 || event.velocityY > 0.4) {
                    this.offset = 1;
                } else {
                    this.offset = 0;
                }
            });
        },
    },
};
</script>

<template>
    <div
            class="uppBox scrollableUppbox uppBox--pink post"
            ref="post"
            :style="{ transform: `translate3d(0, ${offset * 100}%, 0)` }"
    >
        <div class="post__iconBox">
            <i class="material-icons">pause</i>
        </div>
        <div class="post__authorData">
            <div>photo</div>
            <h1>ExampleUser</h1>
        </div>
        <div class="post__content">
            Content
        </div>
    </div>
</template>

這是后期CSS(其他的只有顏色和陰影)

.post
  position: relative
  flex-direction: column
  font-family: Inter, "Inter Semi Bold", sans-serif
  font-weight: 400
  padding: .5em 1.2em
  height: 100%
  transition: 0.3s ease-in-out

這是我的盒子的行為:

https://imgur.com/vF85N1L

而這就是我想要的平滑度(來自這個項目的組件底卡https://github . com/script coded/vue-3-card-swiper/tree/main):

https://imgur.com/CQHQvDS

我試圖將transform: translate3d(0，${offset * 100}%，0)更改為only translateY(offset)，但同樣會發生這種情況。我試著把偏移量變量改成setup或者試著直接計算偏移量，還是不流暢。