خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

نحوه ایجاد انیمیشن و انتقال در Vue.js

ارشیا یوسفی ادیب ۱۶ تیر, ۱۴۰۲ 4 دقیقه زمان مطالعه

با افزودن انیمیشن ها ظاهر و احساس برنامه Vue خود را زیباتر کنید.

انتقال ها و انیمیشن ها نقش مهمی در تجربه کاربر دارند. با افزودن انیمیشن های ظریف و انتقال بین عناصر در صفحه وب، می توانید تجربه کاربر را افزایش دهید. وب سایت بسیار روان تر، جذاب تر و به طور کلی بهتر به نظر می رسد.

این آموزش نحوه پیاده سازی انتقال ها و انیمیشن ها را در Vue.js نشان می دهد. شما یاد خواهید گرفت که چگونه با استفاده از مولفه انتقال و فریم های کلیدی CSS، هم انتقال های ساده و هم انیمیشن های پیچیده ایجاد کنید.

مولفه انتقال Vue.js

Vue.js دارای یک جزء انتقال داخلی است که به شما امکان می دهد انیمیشن ها را در برنامه خود ایجاد کنید. این مؤلفه دور عنصر هدفی که می‌خواهیم متحرک کنیم، می‌پیچد.

در اینجا مولفه انتقال هدر سطح یک را می‌پیچد:

<transition>
  <h1> Hello </h1>
</transition>

وقتی یک عنصر را با مولفه انتقال می‌پیچید، مولفه کلاس‌های انتقال را به عنصری که می‌پیچد اعمال می‌کند. در مجموع شش کلاس انتقال وجود دارد. سه، انیمیشن عنصر را هنگام ورود به صفحه کنترل می کنند. سه مورد دیگر انیمیشن عنصر را هنگام خروج از صفحه کنترل می کنند.

کد استفاده شده در این مقاله در این مخزن GitHub موجود است و برای استفاده شما تحت مجوز MIT رایگان است.

استفاده از کلاس های انتقال هنگامی که عناصر وارد صفحه می شوند

در طول فرآیند ورود عنصر به DOM، جزء انتقال کلاس‌های enter-from، enter-to و enter-active را به آن اعمال می‌کند. این کلاس‌ها به شما اجازه می‌دهند تا نحوه متحرک شدن یا انتقال عنصر به صفحه را کنترل کنید.

  • enter-from: قبل از ورود عنصر به مرورگر روی آن اعمال می شود. شما از این کلاس برای تنظیم وضعیت CSS اولیه عنصر استفاده می کنید.
  • enter-to: هنگام ورود عنصر به مرورگر بر روی آن اعمال می شود. شما از این کلاس برای تنظیم وضعیت نهایی CSS عنصر استفاده می کنید.
  • enter-active: زمانی که عنصر در حال انتقال از حالتی به حالت دیگر است، اعمال می شود. این جایی است که شما دیکته می کنید که چقدر طول می کشد.
مطلب مرتبط:   نحوه پیاده سازی سطوح بازی در بازی Python

بیایید یک مثال را ببینیم:

<transition>
  <h1> Hello </h1>
</transition>

.enter-from {
  opacity: 0;
}

.enter-to {
  opacity: 1;
}

.enter-active {
  transition: opacity 2s ease;
}

با استفاده از این کد، هدر سطح یک دو ثانیه طول می کشد تا از نامرئی (تعوض: 0) به کاملاً قابل مشاهده (تاری: 1) تبدیل شود. این انتقال زمانی اتفاق می افتد که عنصر وارد DOM شود. بدون انتقال، متن بلافاصله پس از بارگیری صفحه در مرورگر ظاهر می شد.

استفاده از کلاس های انتقال زمانی که عناصر صفحه را ترک می کنند

مؤلفه انتقال از سه کلاس انتقال دیگر پشتیبانی می‌کند که باید هنگام خروج عنصر از DOM استفاده کنید. نام آنها ترک از، ترک به، و ترک فعال است. این کلاس ها نحوه متحرک سازی یا انتقال عنصر از صفحه را کنترل می کنند.

همانطور که ممکن است حدس بزنید، این کلاس ها مشابه کلاس هایی هستند که قبلاً در مورد آنها صحبت کردیم. اما این کلاس‌ها فقط زمانی فعال می‌شوند که عنصر در حال جدا شدن از DOM باشد. نصب و جدا کردن از مفاهیم مهم DOM هستند. به عنوان یک توسعه دهنده، باید درک اولیه ای از DOM و سایر مفاهیم مرتبط داشته باشید.

بیایید یک مثال را ببینیم:

<transition>
  <h1> Hello </h1>
</transition>

.leave-from {
  opacity: 0;
}

.leave-to {
  opacity: 1;
}

.leave-active {
transition: opacity 2s ease;
}

در این حالت، هدر سطح یک دو ثانیه طول می‌کشد تا به آرامی از حالت مرئی (تماندگی: 1) به نامرئی (تاری: 0) تغییر کند. این انتقال زمانی اتفاق می افتد که عنصر از DOM خارج شود. بدون انتقال، متن فوراً از مرورگر ناپدید می شد.

استفاده از نام های انتقال

شما همچنین می توانید یک ویژگی نام را به جزء انتقال خود اضافه کنید. هنگامی که این کار را انجام می دهید، Vue نام را به کلاس های انتقال شما اضافه می کند. این بدان معناست که شما می توانید چندین انتقال در صفحه خود داشته باشید که هر کدام دارای کلاس های انتقال منحصر به فرد و ویژگی های CSS هستند.

مطلب مرتبط:   نحوه جلوگیری از اسکریپت بین سایتی با استفاده از HTML، جاوا اسکریپت و DOM

به عنوان مثال، اگر نام fade را روی مؤلفه انتقال خود تنظیم کنید، پیشوند تمام کلاس های انتقال با fade قرار می گیرد:

<transition name ="fade">
  <h1> Hello </h1>
</transition>

.fade-enter-from {
  opacity: 1;
}
.fade-leave-from {
  opacity: 1;
}

// other "enter" and "leave" classes with the fade as prefix

ایجاد انتقال با استفاده از مولفه انتقال

برای نشان دادن انتقال در Vue.js، یک H1 را در جزء انتقال قرار می دهید. در زیر ، یک دکمه ایجاد خواهید کرد. هنگامی که این دکمه کلیک می شود، متغیر showTitle را بین false و true تغییر می دهد.

این هم کد:

<template>
  <transition name="fade">
    <h1 v-if="showTitle"> Hey People </h1>
  </transition>
  <button @click="showTitle = !showTitle"> Toggle </button>
</template>

سپس بخش اسکریپت را تعریف کنید. این بخش شامل متد راه اندازی است که در آن متغیر showTitle را با false مقداردهی اولیه می کنید.

<script>
import {ref} from 'vue'
export default {
  name: "App",
  setup() {
    const showTitle = ref(false)
    return {showTitle}
  } 
};
</script>

اکنون باید متن و دکمه را در مرورگر خود مشاهده کنید:

اسکرین شات متنی را نشان می دهد که می گوید سلام مردم و یک دکمه

اگر دو بار روی دکمه کلیک کنید، متن ظاهر می شود و سپس ناپدید می شود. اما هیچ انتقالی بین دو کشور وجود نخواهد داشت. بیایید انتقال را در بخش سبک ها اضافه کنیم:

<style>
.fade-enter-from {
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-enter-active {
  transition: opacity 2s ease;
}
.fade-leave-from {
  opacity: 1
}
.fade-leave-to {
  opacity: 0
}
.fade-leave-active {
  transition: opacity 2s ease;
}
</style>

هنگامی که در ابتدا روی دکمه کلیک می شود، با استفاده از کلاس های .enter، H1 را از حالت مات به قابل مشاهده تبدیل می کنید. اما وقتی دوباره روی دکمه کلیک می شود، از کلاس های .leave برای انتقال H1 از قابل مشاهده به نامرئی استفاده می کنید.

مطلب مرتبط:   9 سؤال متداول در مصاحبه با برنامه نویس وب و نحوه پاسخ به آنها

هر دو مجموعه انتقال دو ثانیه طول می کشد و در داخل و خارج از دید محو می شوند. همچنین می توانید ببینید که نام fade به همه نام کلاس ها اضافه شده است. اگر این کار را انجام ندهید، کد کار نخواهد کرد.

ایجاد انیمیشن های پیچیده با فریم های کلیدی CSS

گاهی اوقات دوست دارید انیمیشن شما کمی پیچیده تر باشد. روشی که شما این کار را در Vue.js انجام می دهید با ایجاد انیمیشن های CSS فریم های کلیدی است. اگر علاقه مند به یادگیری بیشتر هستید، راهنمای عمیق انیمیشن فریم های کلیدی CSS ما را بررسی کنید.

به عنوان مثال، بیایید یک مثال انیمیشن wobble را ببینیم. این انیمیشن H1 را هنگام ورود به صفحه از چپ به راست (و بالعکس) تکان می دهد. CCS زیر یک انیمیشن wobble با دستور keyframes@ ایجاد می کند:

@keyframes wobble {
 0% { transform: translateY(-60px); opacity: 0}
 50% {transform: translateY(0px); opacity: 1}
 60% {transform: translateX(8px);}
 70% {transform: translateX(-8px);}
 80% {transform: translateX(4px);}
 90% {transform: translateX(-4px);}
 100% {transform: translateX(0px);}
}

در شروع انیمیشن، H1 مخفی خواهد شد. در نیمه راه انیمیشن (50%)، H1 به طور کامل قابل مشاهده خواهد بود. سپس در مراحل بعدی انیمیشن، متن را به چپ و راست حرکت می دهیم. این به آن یک اثر لرزان می دهد.

این انیمیشن را با ورود عنصر به صفحه اعمال می کند:

.fade-enter-active {
  animation: wobble 0.5s ease;
}

در این صورت انیمیشن نیم ثانیه طول می کشد.

با قابلیت دسترسی در Vue.js آشنا شوید

ما تاکید کردیم که چگونه انتقال ها و انیمیشن ها می توانند تجربه کاربر را بهبود بخشند. یکی دیگر از جنبه های مهم تجربه کاربر، دسترسی بیشتر برنامه شما است. همه کاربران یکسان نیستند. برخی ممکن است دارای معلولیت هایی باشند که مصرف محتوای وب سایت شما را دشوار می کند. بنابراین، مهم است که سایت خود را نیز در دسترس قرار دهید.

Tags: