Animation Techniques ​

Vue এন্টার/লিভ এবং লিস্ট ট্রানজিশন পরিচালনার জন্য <Transition> এবং <TransitionGroup> কম্পোনেন্ট প্রদান করে। যাইহোক, ওয়েবে অ্যানিমেশন ব্যবহার করার আরও অনেক উপায় রয়েছে, এমনকি Vue অ্যাপ্লিকেশনেও। এখানে আমরা কয়েকটি অতিরিক্ত কৌশল নিয়ে আলোচনা করব।

Class-based Animations ​

যে কম্পোনেন্টগুলি 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">Click me</button>  <span v-if="disabled">This feature is 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 ​

কিছু ট্রানজিশন ইফেক্ট মান ইন্টারপোলেটিং দ্বারা প্রয়োগ করা যেতে পারে, উদাহরণস্বরূপ একটি কম্পোনেন্টের সাথে একটি স্টাইল আবদ্ধ করে যখন একটি মিথস্ক্রিয়া ঘটে। উদাহরণস্বরূপ এই উদাহরণ নিন:

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>Move your mouse across this div...</p>  <p>x: {{ x }}</p> </div>

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

রঙ ছাড়াও, আপনি রূপান্তর, প্রস্থ বা উচ্চতা অ্যানিমেট করতে স্টাইল বাইন্ডিংগুলিও ব্যবহার করতে পারেন। এমনকি আপনি স্প্রিং ফিজিক্স ব্যবহার করে এসভিজি পাথগুলিকে অ্যানিমেট করতে পারেন - সর্বোপরি, এগুলি সমস্ত ডেটা বাইন্ডিং বৈশিষ্ট্য:

Animating with Watchers ​

কিছু সৃজনশীলতার সাথে, আমরা কিছু সংখ্যাগত অবস্থার উপর ভিত্তি করে যে কোনও কিছুকে অ্যানিমেট করতে পর্যবেক্ষকদের ব্যবহার করতে পারি। উদাহরণস্বরূপ, আমরা সংখ্যাটি নিজেই অ্যানিমেট করতে পারি:

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 }) })

Type a number: <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 })  }  } }

Type a number: <input v-model.number="number" /> <p>{{ tweened.toFixed(0) }}</p>