如何过渡整个vue.js组件？

Question

因此，我一直看到的所有过渡示例都是用于显示div的，我正在尝试提出一种简单的方法来淡化过渡整个vue.js组件。

我提供了vue.js布局的示例。我敢肯定有很多语法错误-但是这个例子只是为了说明我如何在vue.js中组织我的应用程序

如您所见，

我正在以编程方式为每个组件创建css，因此，我希望（如果可能）不要在组件外部放置一个块。我不知道vue.js是否具有一些挂钩来允许过渡整个组件，或者我是否必须从头开始用javascript写解决方案。

    <div id="vue-main" :style=mainStyle>
      <stages :jobs=jobs></stages>
      <binaries :jobs=jobs></binaries>
    </div>


    <script>
    Vue.component('stages', {
        delimiters: [ '[[', ']]' ],
        props: ['jobs', 'report_links'],
        template: `
          <div emptyDiv>
          <h3> Stages </h3>
          <table :style="tableStyle">
            <tbody>
              <template v-for="item in jobs">
                <tr>
                    <td>
                    [[ item ]]
                    </td>
                </tr>
              </template>
            </tbody>
        </table>
        </div>
        `,
         computed: {
            overviewStyle() {
              return {
                'padding': '8px',
                 'width': '100%',
                 'display': 'table',
                 'border': '1px solid #C0C0C0'
          };
    Vue.component('overview', {
        delimiters: [ '[[', ']]' ],
        props: ['jobs', 'report_links'],
        template: `
        <div overview>
        <h3>Overview</h3>
        <table>
          <tr>
            <td>Start Time</td>
            <tde>[[ jobs[0].start_time ]]</td>
          </tr>
          <tr>
            <td>Duration</td>
            <td>[[ jobs[0].duration ]]</td>
          </tr>
        </table>
        </div>
        `,

var v_root = new Vue({
    delimiters: [ '[[', ']]' ],
    el: '#vue-main',
    data: {
        job_execs: [],
        report_links: '{{ report_links }}',
    },
    computed: {
      mainStyle() {
        return {
            'padding-left': '15px',
            'padding-right': '15px',
            'padding-bottom': '15px',
            'padding-top': '4px',
            'display': 'inline-block',
            'width': '100%'
        };

如何淡化舞台组件？