vue.js 如何在页面加载时禁用过渡组？

omjgkv6w 于 2022-12-19 发布在 Vue.js

关注(0)|答案(4)|浏览(189)

我有一个transition-group来渲染一个div，其中有一个带有v-for属性的组件来渲染几个元素，然后我有一个按钮来添加一个新的元素到数组的开头，这个transition工作得很完美。
我唯一不喜欢的是，在页面加载时整个列表都加载了转换，我想只在页面加载时禁用它。我搜索了Stack和Google，但没有找到方法。有没有办法做到这一点，这样转换在按钮点击时仍然有效，但在页面加载时禁用？

<transition-group
        name="item-list"
        tag="div">
        <item-row
            v-for="item in items"
            :key="item.id"
            :item="item" />
    </transition-group>

.item-list-enter-active,
    .item-list-leave-active,
    .item-list-move {
        transition         : 250ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
        transition-property: opacity, transform;
    }
    
    .item-list-enter {
        opacity  : 0;
        transform: translateX(50px) scaleY(0.5);
    }
    
    .item-list-enter-to {
        opacity  : 1;
        transform: translateX(0) scaleY(1);
    }
    
    .item-list-leave-active {
        position: absolute;
    }
    
    .item-list-leave-to {
        opacity         : 0;
        transform       : scaleY(0);
        transform-origin: center top;
    }

vue.js

来源：https://stackoverflow.com/questions/58308796/how-to-disable-transition-group-only-on-page-load

4条答案

按热度按时间

a6b3iqyw1#

我希望我能找到一种更“Vue-y”的方式来处理这个问题，但是我最终选择了this route。本质上，我在主体中添加了一个类，并删除了所有的转换。然后在组件的created生命周期中，我删除了那个类。这样就删除了页面加载时的转换，但仍然保留了点击按钮时的转换。

赞(0）回复(0）举报 2022-12-19

daolsyd02#

你可以动态地改变转换组的name值。也许在页面加载的时候有一个不同于CSS目标的正确类名的值。然后在mounted生命周期钩子中你可以把它改回正确的类名。

赞(0）回复(0）举报 2022-12-19

ddrv8njm3#

您需要绑定***transition-group***的持续时间
模板：

<transition-group
        :duration="duration"
        name="item-list"
        tag="div">
        <item-row
            v-for="item in items"
            :key="item.id"
            :item="item" />
    </transition-group>

脚本：

data() {
        return {
            duration: 0,
            items: [
                {id: 1},
                {id: 2}
            ]
        }
    },
    methods: {
        add() {
            if(this.duration===0) this.duration = 250
            this.items.push({id: 'xxx'})
        }
    }

赞(0）回复(0）举报 2022-12-19

qoefvg9y4#

以防有人像我一样碰到这个。
最后，我通过在数据中添加一个transitionsOn标志（它被初始化为什么似乎并不重要）和一个计算出的转换名称（即，

<transition-group :name="transitionName">

在computed中，对于名为'flash'的转换，我有

computed: {
            transitionName() {
               return this.transitionsOn ? 'flash' : 'disabled';
            },
        },

然后，当我想让它发射时，我会设置this.transitionsOn = true。
花了很多时间才弄清楚这一点，但它似乎工作正常

赞(0）回复(0）举报 2022-12-19

我来回答

vue.js 如何在页面加载时禁用过渡组？

4条答案

相关问题

热门标签

最新问答