Техніки анімації
Vue надає компоненти <Transition>
і <TransitionGroup>
для обробки переходів входу / виходу і списків. Однак існує багато інших способів використання анімації в Інтернеті, навіть у програмі Vue. Тут ми обговоримо кілька додаткових прийомів.
Анімація на основі класу
Для елементів, які не входять / виходять з DOM, ми можемо запускати анімацію, динамічно додаючи клас CSS:
js
const disabled = ref(false)
function warnDisabled() {
disabled.value = true
setTimeout(() => {
disabled.value = false
}, 1500)
}
template
<div :class="{ shake: disabled }">
<button @click="warnDisabled">Натисніть мене</button>
<span v-if="disabled">Ця функція вимкнена!</span>
</div>
css
.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);
}
}
Анімація на основі стану
Деякі ефекти переходу можна застосувати шляхом інтерполяції значень, наприклад, шляхом прив’язки стилю до елемента під час взаємодії. Візьмемо, наприклад, цей приклад:
js
const x = ref(0)
function onMousemove(e) {
x.value = e.clientX
}
template
<div
@mousemove="onMousemove"
:style="{ backgroundColor: `hsl(${x}, 80%, 50%)` }"
class="movearea"
>
<p>Перемістіть курсор миші по цьому div...</p>
<p>x: {{ x }}</p>
</div>
css
.movearea {
transition: 0.3s background-color ease;
}
Перемістіть курсор миші по цьому div...
x: 0
Крім кольору, ви також можете використовувати прив’язки стилю для анімації трансформації, ширини або висоти. Ви навіть можете анімувати шляхи SVG за допомогою пружинної фізики - зрештою, усі вони є прив’язками даних атрибутів:
Перетягніть мене
Анімація зі спостерігачами
З деякою креативністю ми можемо використовувати спостерігачі, щоб анімувати будь-що на основі певного числового стану. Наприклад, ми можемо анімувати саме число:
js
import { ref, reactive, watch } from 'vue'
import gsap from 'gsap'
const number = ref(0)
const tweened = reactive({
number: 0
})
watch(number, (n) => {
gsap.to(tweened, { duration: 0.5, number: Number(n) || 0 })
})
template
Введіть число: <input v-model.number="number" />
<p>{{ tweened.number.toFixed(0) }}</p>
Введіть число:
0