Animasyon Teknikleri

Vue, giriş/çıkış ve liste geçişlerini yönetmek için ve bileşenlerini sağlar. Ancak, bir Vue uygulamasında bile animasyon kullanmanın birçok başka yolu vardır. Burada birkaç ek teknik tartışacağız.

Sınıf Tabanlı Animasyonlar

ipucu

DOM'a girmeyen/çıkmayan öğeler için animasyonları dinamik olarak bir CSS sınıfı ekleyerek tetikleyebiliriz.

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">Bana tıkla</button>
  <span v-if="disabled">Bu özellik devre dışı bırakıldı!</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);
  }
}

Durum Tabanlı Animasyonlar

bilgi

Bazı geçiş efektleri, bir etkileşim meydana geldiğinde bir öğeye stil bağlayarak değerleri ara değerlerle uygulamak suretiyle uygulanabilir.

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>Fareyi bu divin etrafında hareket ettir...</p>
  <p>x: {{ x }}</p>
</div>

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

not

Renklerin yanı sıra, transform, genişlik veya yükseklik animasyonu için stil bağlamaları da kullanabilirsiniz.

Hatta spring fiziği kullanarak SVG yollarını animatize edebilirsiniz - sonuçta, hepsi birer nitelik veri bağlamasıdır:

Gözlemcilerle Animasyon Yapma

tehlike

Biraz yaratıcılıkla, bazı sayısal durumlara dayanan gözlemcileri kullanarak her şeyi animatize edebiliriz.

Bir sayı yazın: <input v-model.number="number" />
<p>{{ tweened.number.toFixed(0) }}</p>

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

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

watch(number, (n) => {
  gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 })
})

import gsap from 'gsap'

export default {
  data() {
    return {
      number: 0,
      tweened: 0
    }
  },
  watch: {
    number(n) {
      gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 })
    }
  }
}

Bir sayı yazın: <input v-model.number="number" />
<p>{{ tweened.toFixed(0) }}</p>

not

Açık Oyun Alanında Deneyin

not

Açık Oyun Alanında Deneyin