جلسه بیست و ششم آموزش فریم ورک vue.js : آموزش انیمیشن در vue.js

آموزش انیمیشن در vue.js

در جلسه قبلی از آموزش vue.js به مبحث Mixins پرداختیم ، حال در این جلسه به آموزش انیمیشن در vue.js می پردازیم.

vue روشهای مختلفی را برا اعمال انیمیشن ها هنگام واردکردن، به روزرسانی یا حذف شدن از DOM فراهم میکند.

این ابزارها شامل :

1- استفاده از کلاس های animation  و transition به صورت خودکار

2- استفاده از کتابخانه های انیمیشن مثل animate.css

3- استفاده از جاوااسکریپت برای دستکاری مستقیم DOM

4- ادغام کتابخانه های انیمیشن جاوااسکرییپت  مثل velocity.js

 

استفاده از تگ transition:

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

1- v-enter: حالت شروع برای ورود ، قبل از درج المنت اضافه میشود و یک فریم را بعد از درج المنت حذف میکند

2- v-enter-active: حالت فعال برای ورود، در کل مرحله ورود به سیستم اعمال می شود،

قبل از اینکه عنصری درج شود و پس از اینکه اتمام انیمیشن اعمال میشود.

استفاده از این کلاس برای تعریف مدت زمان، تاخیر و کاهش سرعت transition ورود

3- v-enter-to: فقط در ورژن های 2.1.8 و به بالا

حالت پایان برای ورود پس از درج عنصر

4- v-leave: شروع وضعیت خروج

بلافاصله هنگام خروج transition اضافه میشود و بعد از فریم حذف میشود

5- v-leave-active:

حالت فعال برای خروج

6- v-leave-to: فقط در نسخه های 2.1.8 و به بالا

پایان دادن به حالت ورود

آموزش انیمیشن در vuejs

مثال : استفاده از transition برای toggle کردن

Html

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

js

new Vue({
  el: '#demo',
  data: {
    show: true
  }
})

css

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

در مثال بالا با زدن دکمه toggle ، عبارت Hello به صورت fade نمایش و با کلیک دوباره ، fade out می شود.

نکته : تمام transition name ها مثل fade ، آن 6 کلاس براشون ایجاد میشود و میتوانیم ازشون به شکل بالا استفاده کنیم و نحوه استفاده هم به شکل بالاست

یعنی نام transition به جای حرف v در آن 6 کلاس قرار میگیرد.

نکته : css های کد بالا را میتوانیم ننویسیم تا عملیات پیش فرض انجام شود، اما با اینکار میتوانیم css را override کنیم.

 

مثال دوم :ایجاد toggle show با transition bounce

 

html

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>

js

new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})

css

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

# استفاده از کلاس های custom transition مثل animate.css

میتوانیم کلاس های زیر را برای استفاده از پلاگین هایی نظیر animate.css استفاده کنیم:

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class (2.1.8+)

 نحوه استفاده از animate.css در vue

Html

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

<div id="example-3">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</div>

js

new Vue({
  el: '#example-3',
  data: {
    show: true
  }
})

همانطور که در مثال بالا مشاهده میکنید، با استفاده از کلاس های فوق ، انیمیشن های ورودی و خروجی را مشخص کرده ایم.

استفاده از animation ها و transition با یکدیگر

گاهی نیاز هست که از یک انیمیشن css استفاده کنیم که توسط vue ساخته شده است:

<transition :duration="1000">...</transition>
<transition :duration="{ enter: 500, leave: 800 }">...</transition>

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


<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>Animation & Transition</h1>
        <hr>
        <a class="btn btn-success" @click="showAlert = !showAlert">Show / Hide Alerts</a>
        <div class="col-md-3">
          <select v-model="alertName" class="form-control">
            <option value="fade">fade</option>
            <option value="slide">slide</option>
          </select>
        </div>
        <br>
        <br>
        <!-- <transition :name="alertName" appear>
          <div class="alert alert-info" v-if="showAlert">this is alert</div>
        </transition>

        <transition :name="alertName" type="animation" appear>
          <div class="alert alert-info" v-show="showAlert">this is alert</div>
        </transition>

        <hr>-->
        <transition
          appear
          enter-active-class="animated fadeInUp"
          leave-active-class="animated fadeOutDown"
          mode="out-in"
        >
          <div class="alert alert-info" v-if="showAlert" key="info">this is info alert</div>
          <div class="alert alert-danger" v-else key="danger">this is danger alert</div>
        </transition>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "app",
  data() {
    return {
      showAlert: true,
      alertName: "fade"
    };
  }
};
</script>

نکته : ویژگی      :      mode=“out-in”

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

در مثال بالا، همانطور که میبنیم میاد با زدن دکمه alert مربوط به info اجرا و alert مربوط به danger را میبرد و بالعکس.

استفاده از transition-group

نکته : اگر transition را بخواهیم برای یک المنت ایجاد کنیم، میتوانیم از تگ transition استفاده کنیم ولی اگر بخواهیم برای بیشتر از یک المنت استفاده کنیم ، باید از تگ transition-group استفاده کنیم در غیر این صورت ارور می دهد.

مثال : در مثال زیر مشاهده میکنید که از transition-group برای استفاده در حلقه for استفاده کرده ایم:

html

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>

<div id="flip-list-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
</div>

JS

new Vue({
  el: '#flip-list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})

.flip-list-move {
  transition: transform 1s;
}

همانطور که مشاهده میکنید در مثال بالا با استفاده از transition-group ، آیتم هامون را shuffle کردیم، ( همان بر زدن و قاطی کردن و بهم ریختن)
یعنی با هر بار کلیک اعداد 1 تا 10 با هم قاطی میشوند، در عین اینکه حالت انیمیشن درونشون حفظ شده است.

برچسب‌ها:

با کامنت گذاری ما را در ارائه آموزش بهتر یاری کنید

026-32601 داخلی 4

info@pinsite.ir

ثبت سفارش طراحی سایت

برای دریافت تخفیف، در هنگام تماس، نحوه آشنایی با شرکت را از طریق سایت pinsite.ir اعلام کنید