એનિમેશન ટેકનિક્સ (Animation Techniques) ​

Vue એન્ટર / લીવ (enter / leave) અને લિસ્ટ ટ્રાન્ઝિશનને હેન્ડલ કરવા માટે <Transition> અને <TransitionGroup> ઘટકો પ્રદાન કરે છે. જો કે, વેબ પર એનિમેશનનો ઉપયોગ કરવાની ઘણી અન્ય રીતો છે, ભલે તે Vue એપ્લિકેશનમાં હોય. અહીં આપણે કેટલીક વધારાની તકનીકોની ચર્ચા કરીશું.

ક્લાસ-આધારિત એનિમેશન (Class-based Animations) ​

DOM માં એન્ટર / લીવ ન થતા હોય તેવા એલિમેન્ટ્સ માટે, આપણે ગતિશીલ રીતે (dynamically) 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">આ સુવિધા અક્ષમ (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-driven Animations) ​

કેટલીક ટ્રાન્ઝિશન ઇફેક્ટ્સ વેલ્યુઝના ઇન્ટરપોલેટીંગ (interpolating) દ્વારા લાગુ કરી શકાય છે, ઉદાહરણ તરીકે જ્યારે કોઈ ઇન્ટરેક્શન થાય ત્યારે એલિમેન્ટ સાથે સ્ટાઇલ બાઇન્ડ કરીને. આ ઉદાહરણ લો:

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>તમારા માઉસને આ ડિવ (div) પર ફેરવો...</p>
  <p>x: {{ x }}</p>
</div>

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

કલર ઉપરાંત, તમે ટ્રાન્સફોર્મ (transform), વિડ્થ (width) અથવા હાઇટ (height) ને એનિમેટ કરવા માટે સ્ટાઇલ બાઇન્ડિંગ્સનો પણ ઉપયોગ કરી શકો છો. તમે સ્પ્રિંગ ફિઝિક્સ (spring physics) નો ઉપયોગ કરીને SVG પાથને પણ એનિમેટ કરી શકો છો - છેવટે, તે બધા એટ્રિબ્યુટ ડેટા બાઇન્ડિંગ્સ છે:

વોચર્સ (Watchers) સાથે એનિમેટીંગ ​

કેટલીક સર્જનાત્મકતા સાથે, આપણે કોઈપણ સંખ્યાત્મક સ્ટેટના આધારે કંઈપણ એનિમેટ કરવા માટે વોચર્સનો ઉપયોગ કરી શકીએ છીએ. ઉદાહરણ તરીકે, આપણે નંબરને જ એનિમેટ કરી શકીએ છીએ:

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

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

// નોંધ: Number.MAX_SAFE_INTEGER (9007199254740991) કરતા મોટા ઇનપુટ્સ માટે,
// JavaScript નંબર પ્રિસિઝનમાં મર્યાદાઓને કારણે પરિણામ અચોક્કસ હોઈ શકે છે.
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
    }
  },
  // નોંધ: Number.MAX_SAFE_INTEGER (9007199254740991) કરતા મોટા ઇનપુટ્સ માટે,
  // JavaScript નંબર પ્રિસિઝનમાં મર્યાદાઓને કારણે પરિણામ અચોક્કસ હોઈ શકે છે.
  watch: {
    number(n) {
      gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 })
    }
  }
}

એક નંબર લખો: <input v-model.number="number" />
<p>{{ tweened.toFixed(0) }}</p>