Vue 1.0.18 Bug Report
HTML
<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<button @click="start">Start filling</button>
<button @click="remove">Start removing</button>
<button @click="stop">Stop</button>
<ul>
<template v-for="data in datas">
<li transition="trans" @click="showData($index)">{{ $index }}: {{ data }}</li>
</template>
</ul>
CSS
.trans-transition {
transition: opacity .5s;
opacity: 1;
}
.trans-enter, .trans-leave {
opacity: 0.1;
}
JavaScript
var before = 0;
var after = 0;
var fill_;
var empty;
Vue.transition('trans', {
beforeLeave: function(el) {
before++;
console.log("Before:", before)
},
afterLeave: function(el) {
after++;
console.log("After:", after)
}
});
var vm = new Vue({
el: 'html',
data: {
datas: []
},
methods: {
start: function() {
var _this = this;
fill_ = setInterval(function() {
_this.datas.push("Test String " + _this.datas.length);
}, 51);
},
remove: function() {
var _this = this;
empty = setInterval(function() {
_this.datas = [];
}, 43);
},
stop: function() {
clearInterval(fill_);
clearInterval(empty);
},
showData: function(index) {
alert("Index:" + index);
}
}
});