programing

v-move 클래스를 사용할 때 Vue가 트리거되지 않습니까?

copyandpastes 2022. 7. 30. 21:11
반응형

v-move 클래스를 사용할 때 Vue가 트리거되지 않습니까?

난 계속 그 애한테<transition-group>일을 할 수 있게끔 만들었는데 도저히 이해가 안 가네요.상자를 클릭하면 요소가 위치를 변경합니다. 즉, 트리거해야 합니다.v-move이게 제가 보고 있는 Vue 문서의 특정 부분입니다.

테스트 앱 링크입니다.

<style>

.test-group-leave-to{
    opacity: 0;
}
.test-group-move{
    transition: transform 5s;
}

</style>

<body>

<div id='app'>
    <test-comp></test-comp>
</div>
<script>

let arrary = ['1','2','3','4','5','6','7','8','9'];

new Vue({
    el: "#app",
    components: {
        "test-comp":{
            template: `
                <div style='display:inline-block;'>
                    <transition-group name='test-group'>
                        <div 
                        class='box' 
                        v-for='(all,ind) in arr' 
                        :key='all' 
                        @click='del(ind, $event)'>{{ all }}</div>
                    </transition-group>
                </div>
            `,
            data(){
                return {
                    arr: arrary
                }
            },
            methods: {
                del(ind, e){
                    e.target.style.left = '100px';
                    this.arr.splice(ind,1);
                }
            }
        }
    }
});
</script>

부드러운 애니메이션을 실현하기 위한 조금 다른 접근법:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&family=Indie+Flower&family=Nunito+Sans:wght@400;600;700;800;900&display=swap" rel="stylesheet">

<style>

body{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    font-family: 'Nunito', sans-serif;
}
.outer-box {
    position: relative;
    width: 100%;
    padding: 5px 10px;
    transition: all 1s;
}
.box{
    border: 1px solid blue;
    text-align: center;
    width: 50px;
    height: 50px;
    user-select: none;  
}

.animate_move-enter, .animate_move-leave-to {
  opacity: 0;
  transform: translateX(100px);
}
.animate_move-leave-active {
  position: absolute;
}

</style>
</head>
<body>

<div id='app'>
    <test-comp></test-comp>
</div>
<script>

let arrary = ['1','2','3','4','5','6','7','8','9'];

new Vue({
    el: "#app",
    components: {
        "test-comp":{
            template: `
                <div>
                    <transition-group name='animate_move'>
                      <div v-for='(all,ind) in arr' :key='all' class="outer-box">
                          <div class='box' @click='del(ind, $event)'>{{ all }}</div>
                      </div>
                    </transition-group>
                </div>
            `,
            data(){
                return {
                    arr: arrary
                }
            },
            methods: {
                del(ind, e){
                    this.arr.splice(ind,1);
                }
            }
        }
    }
});
</script>
</body>
</html>

이렇게 하면 점프 블록을 제거한 후에 점프 블록을 피할 수 있습니다.

이동 전환 대신 사용할 것을 제안합니다. 삭제해야 합니다.e.target.style.left = '100px';:

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&family=Indie+Flower&family=Nunito+Sans:wght@400;600;700;800;900&display=swap" rel="stylesheet">

  <style>
    body {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      font-family: 'Nunito', sans-serif;
    }
    
    .box {
      position: relative;
      border: 1px solid blue;
      margin: 10px;
      text-align: center;
      width: 50px;
      height: 50px;
      user-select: none;
    }
    
    .test-group-enter-active,
    .test-group-leave-active {
      transition: all 1s;
    }
    
    .test-group-enter,
    .test-group-leave-to {
      opacity: 0;
      transform: translateX(100px);
    }
  </style>
</head>

<body>

  <div id='app'>
    <test-comp></test-comp>
  </div>
  <script>
    let arrary = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];

    new Vue({
      el: "#app",
      components: {
        "test-comp": {
          template: `
                <div style='display:inline-block;'>
                    <transition-group name='test-group'>
                        <div 
                        class='box' 
                        v-for='(all,ind) in arr' 
                        :key='all' 
                        @click='del(ind, $event)'>{{ all }}</div>
                    </transition-group>
                </div>
            `,
          data() {
            return {
              arr: arrary
            }
          },
          methods: {
            del(ind, e) {

              //e.target.style.left = '100px';
              this.arr.splice(ind, 1);
            }
          }
        }
      }
    });
  </script>
</body>

</html>

언급URL : https://stackoverflow.com/questions/63366796/vue-transition-group-is-not-triggering-when-using-v-move-class

반응형
저작자표시

'programing' 카테고리의 다른 글

TypeError: 정의되지 않은 속성 'rtl'을 읽을 수 없습니다.  (0) 2022.07.30
Vuetify v0.17.6: v-select에서 자동 완성 텍스트를 가져오는 방법  (0) 2022.07.30
'asmlinkage' 수식어의 의미는 무엇입니까?  (0) 2022.07.30
C에서는 브래킷이 스택프레임으로 기능합니까?  (0) 2022.07.30
유형 스크립트를 사용하여 Vue 데이터 개체에서 데이터 유형 설정  (0) 2022.07.30

'programing'의 다른글

  • 현재글v-move 클래스를 사용할 때 Vue가 트리거되지 않습니까?

관련글

댓글

티스토리툴바