테이블 행에서 Vuejs 전환

테이블 행에서 Vuejs 전환

나는 html 테이블 행(vue.js)에서 성공하지 못하고 전환(애니메이션)을 하려고 한다.여기 전체 예가 있다.

  new Vue({
    el: '#data',
    data: {
      items: [
        {
          data: 'd1',
          more: false
        },
        {
          data: 'd2',
          more: false
        },
      ]
    }

  });

.fade-enter-active, .fade-leave-active {
        transition: opacity 2s
      }
      .fade-enter, .fade-leave-to  {
        opacity: 0
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>


    <div class="container-fluid" id="data">
      <br>
      <br>
      <table border="1" class="table table-bordered">
        <thead class="thead-inverse">
          <tr>
            <th>anim</th>
          </tr>
        </thead>
        <tbody>  
        <template v-for="item, k in items">
          <tr>
            <td><button @click="item.more = !item.more" type="button" 
                         v-bind:class="[item.more ? 'btn-danger' : 'btn-primary']" class="btn">Show the hidden row</button></td>
          </tr>

          <transition name="fade" > 
            <tr  v-bind:key="item" v-if="item.more">
              <td><p >{{k + 1}} - {{item.data}}</p></td>
            </tr>
          </transition>

        </template>
        </tbody>
      </table>
    </div>

숨겨진 테이블 행이 나타날 때 불투명도 속성에 대한 전이/애니메이션과 함께 나타나기를 기대하지만, 아무 일도 일어나지 않고 있는데, 어떻게 해야 하지?이것은 스판이나 다른 것과 같은 다른 요소에 완벽하게 작용하고 있다.

우선, 나는 네가 끈 템플릿을 사용했다면, 너의 질문에 있는 코드는 그대로 작동했을 것이라는 것을 지적하고 싶다.

console.clear()
new Vue({
    el: '#data',
    template: `
     <div>
          <br>
      <br>
      <table border="1" class="table table-bordered">
        <thead class="thead-inverse">
          <tr>
            <th>anim</th>
          </tr>
        </thead>
        <tbody>  
        <template v-for="item, k in items">
          <tr>
            <td><button @click="item.more = !item.more" type="button" 
                         v-bind:class="[item.more ? 'btn-danger' : 'btn-primary']" class="btn">Show the hidden row</button></td>
          </tr>

          <transition name="fade" > 
            <tr  v-bind:key="item" v-if="item.more">
              <td><p >{{k + 1}} - {{item.data}}</p></td>
            </tr>
          </transition>

        </template>
        </tbody>
      </table>
      </div>
    `,
    data: {
      items: [
        {
          data: 'd1',
          more: false
        },
        {
          data: 'd2',
          more: false
        },
      ]
    }

  });

.fade-enter-active, .fade-leave-active {
        transition: opacity 2s
      }
      .fade-enter, .fade-leave-to  {
        opacity: 0
      }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>


    <div class="container-fluid" id="data">

    </div>

이 예제에서 변경한 유일한 내용은 DOM에서 템플릿을 정의하는 대신 Vue 템플릿을 문자열로 변환한 것뿐입니다.이 단일 변경이 작동하는 이유는 "DOM" 템플릿을 사용할 때 Vue가 템플릿을 렌더 함수로 변환하기 전에 브라우저에서 HTML을 구문 분석해야 하기 때문이다.작업할 때table에서 렌더링할 수 요, 라고는 표에 관련된 요소만 있다)가 있다. 일반적으로 테이블과 관련된 요소만(일반적으로)thead tbody tr td, 등). transition겉으로 보기에 잘 어울리는 요소는 아니다(그러나 다소 놀랍게도, 그것은 질식하지 않는다).template).

그러나 문자열 템플릿은 브라우저에 의해 구문 분석되지 않으며 렌더 기능으로 직접 변환되므로 작성한 대로 사용할 수 있다.그래서 제 첫 번째 추천은, 그냥 문자열 템플릿을 사용하는 겁니다.

하지만 당신이 DOM 템플릿을 계속 사용하길 원했다면, 우리는 몇 가지 코드를 변경해야 한다.우선 브라우저가 행복해질 곳으로 전환을 옮겨야 한다.테이블로 우리는 테이블로 이동함으로써 쉽게 그것을 할 수 있다.tbody술래잡기와 부에 특선 사용is지시의둘째, 우리의 전환은 이제 여러 요소에 적용될 것이기 때문에, 우리는 그것을 a로 바꿀 필요가 있다.transition-group.

왜냐하면 우리는 a를 사용하고 있기 때문이다.transition-group전환 내부의 각 요소에는 키가 있어야 한다.각 행에 대해 해당 행에 대한 키를 추가하십시오.

console.clear()
new Vue({
  el: '#data',
  data: {
    items: [{
        data: 'd1',
        more: false
      },
      {
        data: 'd2',
        more: false
      },
    ]
  }

});

.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s
}

.fade-enter,
.fade-leave-to {
  opacity: 0
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>

<div class="container-fluid" id="data">
  <br>
  <br>
  <table border="1" class="table table-bordered">
    <thead class="thead-inverse">
      <tr>
        <th>anim</th>
      </tr>
    </thead>
    <tbody  name="fade" is="transition-group">
      <template v-for="item, k in items">
          <tr v-bind:key="`button-${item.data}`">
            <td>
              <button @click="item.more = !item.more" 
                      type="button" 
                      v-bind:class="[item.more ? 'btn-danger' : 'btn-primary']" 
                      class="btn">Show the hidden row
              </button>
            </td>
          </tr>
          <tr  v-bind:key="`detail-${item.data}`" v-if="item.more">
            <td><p >{{k + 1}} - {{item.data}}</p></td>
          </tr>
        </template>
    </tbody>
  </table>
</div>

<전환> 태그를 모두 제거하고 대신 다음과 같이 하십시오.

 <tr name="fade" is="transition" v-bind:key="item.data" v-if="item.more">

출처: https://github.com/vuejs/vue/issues/3907#issuecomment-253111682

Fiddle: https://jsfiddle.net/c8vqajb4/3/

업데이트:

우리는 결국 다음과 같은 전환 그룹을 사용하게 되었다.

<tbody name="fade" is="transition-group">
    <tr class="row" v-bind:key="item.data" v-if="item.more">
      <td><p >{{k + 1}} - {{item.data}}</p></td>
     </tr>
</tbody>

여기에 제시된 바와 같이: https://vuejs.org/v2/guide/transitions.html#List-Transitions

Fiddle: https://jsfiddle.net/c8vqajb4/4/

전환은 단일 렌더링 요소에서만 작동함

만약 우리가 원소 내부로 전이되면, 그것은 효과가 있다.

또한 도움이 될 수 있는 전환 그룹의 사용을 검토해야 한다.

참조URL: https://stackoverflow.com/questions/45720175/vuejs-transition-on-table-rows