تکنیک‌های انیمیشن ​

Vue کامپوننت‌های <Transition> و <TransitionGroup> را برای رسیدگی به ترنزیشن‌های enter، leave و list را ارائه می‌دهد. درحالی که، روش‌های فراوانی در وب برای استفاده از انیمیشن‌ها وجود دارد. در اینجا چند تکنیک اضافی را مورد بحث قرار خواهیم داد.

انیمیشن‌های کلاس محور ​

برای عناصری که وارد یا خارج از DOM نمی شوند، می‌توانیم انیمیشن‌ها را فقط با افزودن یک کلاس CSS به صورت پویا فعال کنیم:

const disabled = ref(false)

function warnDisabled() {
  disabled.value = true
  setTimeout(() => {
    disabled.value = false
  }, 1500)
}

export default {
  data() {
    return {
      disabled: false
    }
  },
  methods: {
    warnDisabled() {
      this.disabled = true
      setTimeout(() => {
        this.disabled = false
      }, 1500)
    }
  }
}

<div :class="{ shake: disabled }">
  <button @click="warnDisabled">روی من کلیک کن</button>
  <span v-if="disabled">این ویژگی غیرفعال است</span>
</div>

.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
}

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

انیمیشن‌های state محور ​

برخی از ترنزیشن‌ها می‌توانند با درج مقادیر اعمال شوند، برای مثال وصل کردن یک style به یک عنصر در حین وقوع یک تعامل، این مثال را در نظر بگیرید:

const x = ref(0)

function onMousemove(e) {
  x.value = e.clientX
}

export default {
  data() {
    return {
      x: 0
    }
  },
  methods: {
    onMousemove(e) {
      this.x = e.clientX
    }
  }
}

<div
  @mousemove="onMousemove"
  :style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }"
  class="movearea"
>
  <p>ماوس خود را روی این قسمت حرکت دهید...</p>
  <p>x: {{ x }}</p>
</div>

.movearea {
  transition: 0.3s background-color ease;
}

علاوه بر رنگ، شما همچنین می‌توانید از اتصال style برای انیمیشن تبدیل عرض یا ارتفاع استفاده کنید. حتی می‌توانید مسیرهای SVG را با استفاده از فیزیک فنر انیمیشن کنید - در نهایت، همه آن‌ها اتصال داده ویژگی‌ها هستند:

انیمیشن به کمک ناظرها (Watchers) ​

با کمی خلاقیت، می‌توانیم از ناظرها برای انیمیشن هر چیزی بر اساس یک state عددی استفاده کنیم. به عنوان مثال، می‌توانیم خود عدد را انیمیشن کنیم:

import { ref, reactive, watch } from 'vue'
import gsap from 'gsap'

const number = ref(0)
const tweened = reactive({
  number: 0
})

// Note: For inputs greater than Number.MAX_SAFE_INTEGER (9007199254740991),
// the result may be inaccurate due to limitations in JavaScript number precision.
watch(number, (n) => {
  gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 })
})

عددی را تایپ کنید: <input v-model.number="number" />
<p>{{ tweened.number.toFixed(0) }}</p>

import gsap from 'gsap'

export default {
  data() {
    return {
      number: 0,
      tweened: 0
    }
  },
  // Note: For inputs greater than Number.MAX_SAFE_INTEGER (9007199254740991),
  // the result may be inaccurate due to limitations in JavaScript number precision.
  watch: {
    number(n) {
      gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 })
    }
  }
}

عددی را تایپ کنید: <input v-model.number="number" />
<p>{{ tweened.toFixed(0) }}</p>