关于vue.js的过渡使用

Question

在文档中有这么一段话,我想知道在.vue后缀的文件中如何使用?
Animate.css已经下载了,在main.js引用了
在xxx.vue里上面是<template>,下面是export default {},应该如何写呢?直接在{}里写Vue.transition好像不对

Answer 1

正确姿势如下：

<div id="demo">
    <input v-model="query">
    <ul>
        <li class="animated" v-for="item in list | filterBy query"
            transition="bounce"
            stagger="100">
          {{item.msg}}
         </li>
    </ul>
</div>

new Vue({
    el: '#demo',
    data: {
        query: '',
        list: [
            { msg: 'Bruce Lee' },
            { msg: 'Jackie Chan' },
            { msg: 'Chuck Norris' },
            { msg: 'Jet Li' },
            { msg: 'Kung Fury' }
        ]
    },
    transitions: {
        bounce: {
            enterClass: 'bounceInLeft',
            leaveClass: 'bounceOutRight'
        }
    }
})

在线demojsfiddle。

所以问题的关键在于，你要在你的.vue里的script里加这一段：

export default {
    data: function(){
        //....
    },
    transitions: {
        bounce: {
            enterClass: 'bounceInLeft',
            leaveClass: 'bounceOutRight'
        }
    }
};

Answer 2

<template></template>
<script>
    import Vue from 'vue';
    export default({});
    Vue.transition("xxx",function(){});
</script>

我是这样用的。。。