vuejs / vue-animated-list Goto Github PK

View Code? Open in Web Editor NEW

462.0 11.0 47.0 11 KB

A Vue.js plugin for easily animating `v-for` rendered lists.

License: MIT License

HTML 32.40% JavaScript 67.60%

vue-animated-list's Introduction

vue-animated-list

NOTE: this plugin is for Vue 1.x only. Vue 2.0 supports moving animations out of the box.

A Vue.js plugin for easily animating v-for rendered lists.

Live Demo

Compatibility: IE10+.

Installation

With Modules

// ES6
import Vue from 'vue'
import VueAnimatedList from 'vue-animated-list'
Vue.use(VueAnimatedList)

// ES5
var Vue = require('vue')
Vue.use(require('vue-animated-list'))

<script> Include

Just include vue-animated-list.js after Vue itself.

Usage

There's nothing you need to do in JavaScript except for installation. In your markup, make sure the v-for has a transition attribute:

<div v-for="item in items" transition="item">
  {{ item.text }}
</div>

Now, all you need to do is define the .item-move CSS class:

.item-move {
  /* applied to the element when moving */
  transition: transform .5s cubic-bezier(.55,0,.1,1);
}

And that's it! You can also add CSS classes for enter and leave transitions - they all work nicely together!

A few things to note:

The animation is done using the CSS transform property. So make sure when .item-move is applied its transform property is transition-enabled.
Move animations can only work on elements, so it doesn't work for <template v-for> and fragment instance components.

How Does It Work?

This is inspired by this great post by Joshua Comeau, which is in turn based on the FLIP technique by Paul Lewis. So read those if you are interested in the technical details!

License

MIT

vue-animated-list's People

Contributors

Stargazers

Watchers

Forkers

huchundong zdfsilence zuibunan hdd1223 kazupon xiyira31 codetrouble semi-xi wilsondebug wszxdhr distil 2016fanyu hgcoder fanyer morsqlw teng2015 wujie520303 allin09 mpersonal is00hcw crabmusket yezhoucc quality520 abergs xygahs0801 imjerrybao yuannianfeng devedse lgs athiwatp beibeilzz liu-huitao feluxmaj kossmos akari1987 hhy5277 zisuzon marciopocebon razrabw doc22940 panboren lemonsnight saebifar morraycage isabella232 wwwk seanpm2001

vue-animated-list's Issues

Uncaught TypeError: Cannot read property 'diff' of undefined

I'm using vue ^2.5.2 and vue-animated-list ^1.0.2.

I get the following stack trace:

Uncaught TypeError: Cannot read property 'diff' of undefined
    at install (vue-animated-list.js?be79:17)
    at Function.Vue.use (vue.esm.js?65d7:4753)
    at eval (main.js?1c90:13)
    at Object.<anonymous> (app.js:1364)
    at __webpack_require__ (app.js:660)
    at fn (app.js:86)
    at Object.<anonymous> (app.js:2523)
    at __webpack_require__ (app.js:660)
    at app.js:709
    at app.js:712

This is my component. It renders a simple ul of list items.

<template>
  <div class="activities-list">
    <h3 class="bd-title">Your activities ({{ activityCount }}):</h3>
    <div class="card">
      <ul class="list-group list-group-flush">
        <li class="list-group-item"
            v-for="activity in activities"
            transition="activity"
            :key="activity.id">
          {{ activity.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapGetters } = createNamespacedHelpers("activities");

export default {
  computed: {
    ...mapState({
      activities: "activities"
    }),
    ...mapGetters(["activityCount"])
  }
};
</script>

<style scoped>
.item-move {
  /* applied to the element when moving */
  transition: transform 0.5s cubic-bezier(0.55, 0, 0.1, 1);
}
</style>

The data is in a vuex store. This is the state:

const initialActivities = [
  {
    id: 0,
    name: "No Activities"
  }
];

const state = {
  items: [
    { id: 1, name: "Activity 1" },
    { id: 2, name: "Activity 2" },
    { id: 3, name: "Activity 3" },
    { id: 4, name: "Activity 4" },
    { id: 5, name: "Activity 5" },
    { id: 6, name: "Activity 6" }
  ],
  activities: initialActivities
};

Working with v-show

I'd like to use vue-animated-list based on a v-show property since I have some categories you can turn on/off. Based on these categories I show/hide items in the list. Is there a workaround for this? Or maybe planned to build this in?

Thanks in advance!

vue 3 support

I've no idea how easy would this be to port to Vue 3. Maybe it's just a minor syntax change or maybe patching of v-for would need to be done completely differently?

Also possible on slider?

Is there a way to use this for a multiple item slider?
`

<div class="grid_nav right" @click="currentItem--">></div>
<div  class="grid_block col-xxs-12 col-xs-6 col-sm-3"
      v-for="item in items"
      transition="item"
      v-if="$index >= currentItem && $index <= currentItem + 3"
  >
  <div class="grid_inner">
    <figure>
      <img v-bind:src="item.image" />
    </figure>
    <div class="grid_content">
      <h4>{{ item.title }}</h4>
      <p>{{{ item.content | hashtag }}}</p>
    </div>
  </div>
</div>

` This is my layout what i want to slide per item. The move class is only applied if i remove the v-if and do a shuffle function on my items object.

Vue 2.0 version

Will this be ported to Vue 2.0 ?

Unable to use track-by="$index"

For some reason the move transition stops working when using track-by="$index". It works fine when using track-by with any other existing property, like ie. track-by="id". I've tried taking a look at the code, but I can't seem to locate the issue.

Do you support stagger properties for this?

The "stagger" property doesn''t apply on the item-moving transitions, only on newly spawned items as per standard vue implementation (ie. is there another property like "stagger-movement"
property?). I guess in most use-cases, the case of staggering delay of item-moving transitions isn't really a common use-case? Albeit, that may be good as it can simulate turn based movement of individual items.