关于vue.js的过渡使用

问题描述

问 题

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

解决方案

正确姿势如下：

<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'
        }
    }
};

这篇关于关于vue.js的过渡使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！