<Transition> (<Transition>)

اینجا با «انیمیشن Transition در Vue» آشنا می شوی. «ترنزیشن (Transition)» یعنی زیبا وارد و خارج شدن عناصر. مثل ظاهر شدن کارت نمره در گوشی.

ترنزیشن در Vue چیست؟

کامپوننت <Transition> روی افزودن و حذف عناصر کار می کند. با v-if یا v-show فعال می شود. یک ریشه درون <Transition> مجاز است.

قوانین انیمیشن یا با کلاس های CSS خودکار است. یا با «هوک های جاوااسکریپت (JavaScript Hooks)» کنترل می شود. هر کدام مرحله های ورود و خروج را پوشش می دهند.

ویژگی ها (Props)

• appear: انیمیشن در اولین نمایش اجرا می شود.
• mode: ترتیب ورود/خروج را مشخص می کند؛ out-in یا in-out.
• name: پیشوند کلاس های CSS را تغییر می دهد.
• css: اگر false باشد، فقط هوک های JS کار می کنند.
• type و duration: نوع انتظار و زمان بندی را تعیین می کنند.
• enter* / leave*: نام گذاری سفارشی کلاس ها.

نمونه ساده با v-if

این نمونه یک پاراگراف را هنگام حذف یا اضافه، انیمیت می کند.

<template>
  <Transition>
    <p v-if="exists">Hello World!</p>
  </Transition>
</template>

مشاهده در ادیتور

کلاس های CSS آماده ترنزیشن

کلاس های v-enter-* و v-leave-* خودکار اضافه می شوند. با آن ها شفافیت، جابه جایی، و… را تنظیم کن.

<template>
  <div>
    <h1>Add/Remove &lt;p&gt;</h1>
    <button @click="exists = !exists">{{ btnText }}</button><br>
    <Transition>
      <p v-if="exists">Hello World!</p>
    </Transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      exists: false
    };
  },
  computed: {
    btnText() {
      if (this.exists) {
        return "Remove";
      }
      else {
        return "Add";
      }
    }
  }
};
<\/script>
<style>
.v-enter-from {
  opacity: 0;
  translate: -100px 0;
}
.v-enter-to {
  opacity: 1;
  translate: 0 0;
}
.v-leave-from {
  opacity: 1;
  translate: 0 0;
}
.v-leave-to {
  opacity: 0;
  translate: 100px 0;
}
p {
  background-color: lightgreen;
  display: inline-block;
  padding: 10px;
  transition: all 0.5s;
}
</style>

مشاهده در ادیتور

نام گذاری با name و کنترل mode

با name، کلاس ها از v-* به swirl-* تغییر می کنند. با mode، ترتیب ورود/خروج را دقیق می کنی.

<template>
  <div>
    <button @click="p1Exists = !p1Exists">{{ btn1Text }}</button><br>
    <Transition>
      <p v-if="p1Exists" id="p1">Hello World!</p>
    </Transition>
    <hr>
    <button @click="p2Exists = !p2Exists">{{ btn2Text }}</button><br>
    <Transition name="swirl" mode="out-in">
      <p v-if="p2Exists" id="p2">Hello World!</p>
    </Transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      p1Exists: false,
      p2Exists: false
    };
  },
  computed: {
    btn1Text() {
      if (this.p1Exists) {
        return "Remove";
      }
      else {
        return "Add";
      }
    },
    btn2Text() {
      if (this.p2Exists) {
        return "Remove";
      }
      else {
        return "Add";
      }
    }
  }
};
<\/script>
<style>
.v-enter-active {
  animation: added 1s;
}
.v-leave-active {
  animation: added 1s reverse;
}
@keyframes added {
  from {
    opacity: 0;
    translate: -100px 0;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}
.swirl-enter-active {
  animation: swirlAdded 1s;
}
.swirl-leave-active {
  animation: swirlAdded 1s reverse;
}
@keyframes swirlAdded {
  from {
    opacity: 0;
    rotate: 0;
    scale: 0.1;
  }
  to {
    opacity: 1;
    rotate: 360deg;
    scale: 1;
  }
}
</style>

مشاهده در ادیتور

هوک های جاوااسکریپت و css=false

وقتی :css="false" باشد، باید در enter/leave، تابع done را صدا بزنی.

<template>
  <div>
    <h1>JS Hooks</h1>
    <button @click="pVisible = !pVisible">Toggle</button>
    <Transition :css="false" @enter="onEnter" @leave="onLeave">
      <p v-if="pVisible" id="p1">Hello World!</p>
    </Transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      pVisible: false
    };
  },
  methods: {
    onEnter(el, done) {
      let pos = 0;
      window.requestAnimationFrame(frame);
      function frame() {
        if (pos > 150) {
          done();
        }
        else {
          pos++;
          el.style.left = pos + "px";
          window.requestAnimationFrame(frame);
        }
      }
    },
    onLeave(el, done) {
      let pos = 150;
      window.requestAnimationFrame(frame);
      function frame() {
        if (pos < 0) {
          done();
        }
        else {
          pos--;
          el.style.left = pos + "px";
          window.requestAnimationFrame(frame);
        }
      }
    }
  }
};
<\/script>
<style>
#p1 {
  position: absolute;
  padding: 10px;
  border: dashed black 1px;
  background-color: lightgreen;
}
</style>

مشاهده در ادیتور

گام های عملی

1. عنصر را داخل <Transition> قرار بده.
2. با v-if یا v-show نمایش را کنترل کن.
3. سبک ها را با v-enter-* و v-leave-* تنظیم کن.
4. در صورت نیاز، از mode یا name استفاده کن.
5. فقط با جاوااسکریپت؟ مقدار css را false بگذار.

نکته: «انیمیشن Transition در Vue» برای مودال، توست، و اسلایدر عالی است.

هشدار: فقط یک فرزند ریشه در <Transition> مجاز است.

جمع بندی سریع

• ترنزیشن، ورود و خروج را انیمیت می کند.
• کلاس های CSS خودکار در دسترس اند.
• mode ترتیب ها را مدیریت می کند.
• name پیشوند کلاس ها را عوض می کند.
• css=false یعنی هوک های JS اجباری اند.