framework7

Open full view…

Can a Vue Virtual List Component be animated?

BrandonHunter
Mon, 15 May 2017 23:32:58 GMT

So I was trying to figure out if its possible to animate the contents of a virtual list when its filtered or sorted like in the Vue examples here: [Vue List Transitioning](https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions). (Also, see the staggered list example below the above link one on that page). It didn't seem to work because of the necessary templating for the f7 Virtual List component. Which is a shame, becase other than the fact that they don't work together, the concepts are so similar, if not identical, that it's like they were made to work together... Anyone know of a way to do this? Thanks in advance!

BrandonHunter
Fri, 19 May 2017 22:54:54 GMT

I'm currently looking though the F7+Vue src to see if there would be a way to implement this, but if anyone knows of a less invasive way, let me know...

NikolayKuznetsov
Sat, 20 May 2017 15:42:00 GMT

Did you try apply example code for f7's list-block?

BrandonHunter
Sat, 20 May 2017 18:15:26 GMT

@NikolayKuznetsov I'm not entire sure what you're referring to specifically unless you're meaning the example code for vanillaF7 under List View which uses <div class="list-block">. I was trying to do it the <f7-list virtual ...> way but when I apply " _:key="'{{id}}'"_ " in a t7-template or _<f7-list-item " :key='item.id' " v-for=...>_ with a computed list, I get a VueWarn that child items of the transition must be keyed, which clearly I specified (also tried the handlebars interpolation and just "id" with the same error for both). (I'll post some code later if anyone needs to look at it but I'm on my phone at the moment) Although now, I'm wondering if it's because I didn't specify a _.leave-active position: absolute_ class attribute on the list items as at one point, when I put the _:key=..._ in the <t7-template ...> tag (just to see what would happen) I didn't get any errors and everything rendered and worked like it should, just without the applied transition. I felt like the compiler would scream at me for trying that, but it didn't before, so I may try applying that CSS rule to see if that works later. _But for now_ if someone could clarify, is it do-able to mix vanilla F7 with the f7 Vue components? If so, I'm considering scrapping the Vue f7 virtual list component and just using a Vue computed list with a v-for to render a vanilla f7 list, just so that I can get inside the rendered code to apply the keys of the transition-group.

BrandonHunter
Sat, 20 May 2017 23:19:19 GMT

Okay, I managed to figure it out... I used the vanilla F7 classes combined with my own CSS and Vue methods etc. for a list-block container, then used `<f7-list-item v-for=...>` with a computed list to get what I was looking for. For the record, its my personal opinion that if you plan on customizing to this level or beyond, skip virtual list and use Vue computed lists to get the result you want. A little more work, but if you know what you're doing, its far less of a headache trying to get around the precompiled parts of the F7 Vue Components. Below is the code I used to solve the issue. *index.html:* ``` <link rel="stylesheet" href="css/animate.css" /> <!-- Search through this list --> <transition enter-active-class="animated bounceInDown" leave-active-class="animated bounceOutUp" > <div id="search-list" class="list-block list-block-search virtual-list searchbar-found" v-show="placefound" > <transition-group name="staggered-fade" tag="ul" v-bind:css="false" v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" > <f7-list-item v-for="(item, index) in computedList" :key="item.subtitle" v-bind:data-index="index" :id="item.subtitle" class="search-item ripple" :title="item.title" :after="item.subtitle"> </f7-list-item> </transition-group> </div> </transition> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script> ``` *app.js:* ``` computed: { computedList: function () { var vm = this return this.items.filter(function (item) { return item.title.toLowerCase().indexOf(vm.query.toLowerCase()) >= 0 || item.subtitle.toLowerCase().indexOf(vm.query.toLowerCase()) >= 0 }) } }, watch: { query: function(val, oldval) { var self = this; console.log(val); /* I use the below to toggle v-show between not-found and found because searchbar events won't trigger*/ if(val.trim() === '' && self.searchbar.active) self.foundStatus([]); else{ console.log("Computed List: "); console.log(self.computedList); self.foundStatus(self.computedList); } }, methods: { beforeEnter: function (el) { console.log(el); console.log("BEFORE ENTER"); el.style.opacity = 0 el.style.height = 0 }, enter: function (el, done) { console.log(el); console.log("ENTER"); var delay = el.dataset.index * 20 setTimeout(function () { Velocity( el, { opacity: 1, height: "48px"}, { complete: done } ) }, delay) }, leave: function (el, done) { console.log(el); console.log("LEAVE"); var delay = el.dataset.index * 10 setTimeout(function () { Velocity( el, { opacity: 0, height: 0 }, { complete: done } ) }, delay) } }, ``` *index.css:* ``` #search-list{ z-index: 1000 !important; font-size: 16px; position: absolute; } ```