Vue.js 使用v-move类时，Vue未触发？_Vue.js_Vuejs2_Vue Component_Vuex_Vue Transitions

Vue.js 使用v-move类时，Vue未触发？

vue.js vuejs2

Vue.js 使用v-move类时，Vue未触发？,vue.js,vuejs2,vue-component,vuex,vue-transitions,Vue.js,Vuejs2,Vue Component,Vuex,Vue Transitions,我一直想去上班，但就是想不出来。单击该框后，元素将更改其位置-这将触发v-move类。是我正在查看的Vue文档的特定部分为了实现更平滑的动画，有一点不同的方法：页面标题身体{ 位置：相对位置；排名：0；左：0；宽度：100%；身高：100%；保证金：0；字体系列：“Nunito”，无衬线； } .外箱{ 位置：相对位置；宽度：100%；填充物：5px10px；过渡：所有1； } .盒子{ 边框：1px纯蓝色；文本对齐：居中；宽度：50px；高度：50px；用户选

我一直想去上班，但就是想不出来。单击该框后，元素将更改其位置-这将触发v-move类。是我正在查看的Vue文档的特定部分

为了实现更平滑的动画，有一点不同的方法：

页面标题身体{ 位置：相对位置；排名：0；左：0；宽度：100%；身高：100%；保证金：0；字体系列：“Nunito”，无衬线； } .外箱{ 位置：相对位置；宽度：100%；填充物：5px10px；过渡：所有1； } .盒子{ 边框：1px纯蓝色；文本对齐：居中；宽度：50px；高度：50px；用户选择：无； } .animate_move-enter、.animate_move-left-to{ 不透明度：0；转换：translateX100px； } .设置_move-left-active的动画{ 位置：绝对位置； } 设数组=['1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9']；新Vue{ el:应用程序，组成部分：{ 测试组件：{ 模板：` {{all}} `, 资料{ 返回{ 阵列 } }, 方法：{ 德林，e{ 本协议第1条； } } } } };

为了实现更平滑的动画，有一点不同的方法：

页面标题身体{ 位置：绝对位置；排名：0；左：0；宽度：100%；身高：100%；保证金：0；字体系列：“Nunito”，无衬线； } .盒子{ 位置：相对位置；边框：1px纯蓝色；利润率：10px；文本对齐：居中；宽度：50px；高度：50px；用户选择：无； } .测试组进入活动状态， .测试组保持活动状态{ 过渡：所有1； } .进入测试组， .测试组离开{ 不透明度：0；转换：translateX100px； } 让数组=['1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9']；新Vue{ el:应用程序，组成部分：{ 测试组件：{ 模板：` {{all}} `, 资料{ 返回{ 阵列 } }, 方法：{ 德林，e{ //e、 target.style.left='100px'；本协议第1条； } } } } }; 我建议使用而不是移动转换，您应该删除e.target.style.left='100px'；：

更新的css类似于更新的css类似于查询，那么v-move方法是否仅在执行“shuffle”数组函数时使用？它是在元素改变其位置时使用的，而不是在从列表中删除/添加元素时使用。因此，当我从数组中删除元素时，下一个元素会立即填充上一个元素的位置。我原以为v-move会适用于这种情况，但我猜不会？哦，nvm，我只需要添加v-move类就可以了。谢谢！Querion，那么v-move方法是否仅在执行“shuffle”数组函数时使用？它是在元素改变其位置时使用的，而不是在从列表中删除/添加元素时使用的。因此，当我从数组中删除元素时，下一个元素会立即填充上一个元素的位置。我原以为v-move会适用于这种情况，但我猜不会？哦，nvm，我只需要添加v-move类就可以了。谢谢！

<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>