Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/asika32764/vue-animate below:

GitHub - asika32764/vue-animate: A port of Animate.css for use with transitions in Vue.js 2.0

Cross-browser CSS3 animation library, a port of animate.css for use with Vue.js transitions. DEMO

Support for:

• Vue 2.x
• Vue 3.x
• Alpine.js

• @haydenbbickerton is the original vue-animate (LESS) author (Only for Vue 1.x).
• @pavels-hyuna is v2 SCSS version author.

• vue-animate
  • Credit
  • Table of Contents
  • Installation
  • Transitions
    • Custom Transition Classes
    • Custom Animation Properties
    • Slide as Mobile
  • Work with Alpine.js
  • Attentions Seekers
  • Options
  • Contribution Guide
    • Build Lib
    • Build Docs
    • Sync from animate.css

From NPM

npm i @asika32764/vue-animate --save

yarn add @asika32764/vue-animate

CDN

<link rel="stylesheet" href="https://www.unpkg.com/@asika32764/vue-animate/dist/vue-animate.min.css"/>

Import animations for JS Bundler.

import '@asika32764/vue-animate/dist/vue-animate.css';

Import in CSS or SCSS file.

@import "@asika32764/vue-animate/dist/vue-animate.css";

/* If you want to override CSS variables, write it just after importing */
:root {
  --animate-duration: .3s;
  --animate-delay: 0;
}

Use Vue.js transitions as you normally would, but for the transition name you will use one of Animate.css animations removing the animate__ and in/Out from the name.

For example, if you want to use animate__animated animate__fadeInLeft and animate__fadeInLeft on your element, You could write:

<TransitionGroup name="fadeLeft" tag="ul">
    <li v-for="item in items" :key="item.id">
        {{ item }}
    </li>
</TransitionGroup>

enter/leave is already written in the stylesheet, so just remove In/Out from the name and you're golden.

Animate.css's original classnames are supported on enter/leave transitions. So if you're going to use Custom Transition Classes, you can either add -enter/-leave to the classes:

<Transition
  name="custom-classes-transition"
  enter-active-class="bounceLeft-enter"
  leave-active-class="bounceRight-leave"
>
  <p v-if="show">hello</p>
</Transition>

Or use the regular In/Out syntax:

<Transition
  name="bounce"
  enter-active-class="bounceInLeft"
  leave-active-class="bounceOutRight"
>
  <p v-if="show">hello</p>
</Transition>

<Transition name="fade">
  <p v-if="show" 
    style="--animate-duration: 0.3s; --animate-delay: 150; --animate-direction: reverse;"
  >hello</p>
</Transition>

The view element must set position as absolute.

<Transition
    enter-active-class="position-absolute slideInRight"
    leave-active-class="position-absolute slideOutLeft">
    <router-view :key="path"></router-view>
</transition>

Alpine x-transition must add enter and leave suffix, you have to add In and Out suffix after animation name.

<div x-show="open"
    x-transition:enter="fadeIn"
    x-transition:leave="fadeOut"
    style="animation-duration: .3s"
>...</div>

See also: https://github.com/alpinejs/alpine#x-transition

To use Attentions, vue-animate.css provides a set of JS functions.

import { bounce } from '@asika32764/vue-animate';
import { ref } from 'vue';

const el = ref<HTMLElement>();

bounce(el.value);

• DEMO
• Available Attentions Seekers

This function is very useful for adding some one-time animation to html element, for example, this is an incorrect password attentions.

import { headShake } from '@asika32764/vue-animate';

if (!await checkPassword()) {
  headShake(passwordInput.value);
}

You could add animation properties to following parameters.

bounce(el.value, 300); // Durations 300ms
bounce(el.value, '.3s'); // Durations 0.3seconds
bounce(el.value, 300, { delay: 200 }); // Add duration and delay
bounce(el.value, { duration: 300, delay: 200 }); // Add duration and delay by options object

Clone project and install deps.

git clone git@github.com:asika32764/vue-animate.git
cd vue-animate
yarn install

Run:

Will launch a Vite dev server of the documentation site which the source file at src/docs. You can modify this site to test your code. (Do not push you test code.)

Run this command to build /dist files.

Run this command to build /docs files.

This project is auto convert from animate.css animations, if animate.css release new animations, you can run this command to sync animations and auto generate source files.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4