Question

我的vue组件中包含以下行：

<p><b>You have <transition name="fade" mode="out-in"><span :key="todos_counter">{{todos_counter}}</span></transition> items</b></p>

问题似乎是，因为todos_counter来自vuex的商店，使用的是MapGetters，它的真实初始值为0，但是在初始加载时它会更新到（例如）16，因此Vue将转换应用到了初始页面加载中。如果todos_counter在第一次加载后发生更改，我只想要一个过渡。

因此，基本上，我希望初始加载不包括任何转换，但是如果初始组件加载完成todos_counter更改之后，我确实希望发生转换。

这确实很棘手，即使在组件级别使用watch也很困难，因为从观察者的角度来看，todos_count确实会在首页加载时发生变化。

Answer 1

尝试一下，希望它能按上帝的意愿行事。

在您的模板中：

<p>
    <b>
       You have 
       <!-- Added duration prop here -->
       <transition 
         name="fade" 
         mode="out-in"
         :duration="transitionDuration" 
       >
           <span 
             :key="todos_counter"
           >
               {{todos_counter}}
           </span>
       </transition> 
       items
   </b>
</p>

在您的脚本中：

<script>
    export default {
        data() {
            return {
                // this is as if there is no transition, it's way too fast.
                transitionDuration: "1ms"
            };
        },
        mounted() {
            setTimeout(() => {
                // this will set the duration back to normal after the initial render.
                this.transitionDuration = "1000ms"
            }, 100)
        }
    }
<script>

Answer 2

您确实需要一种确定何时加载数据的方法，以便您可以控制过渡。现在，该值最初呈现为0，然后在加载后变为16，因此将播放过渡。

您可以尝试以下操作：

<p v-if="!loading">
  <b>You have <transition name="fade" mode="out-in"><span :key="todos_counter">{{todos_counter}}</span></transition> items</b>
</p>

computed: {
  ...mapState(['loading']),
  ...mapGetters(['todos_counter']),
}

loading最初必须为true，然后在初始加载后将其设置为false。

不一定非要这样，但是您明白了。

Answer 3

这是我采用的方法：

HTML：

process.env['environment_variable_name'] = 'environment_variable_value';

JS：

<p><b>You have <transition v-bind:name="animateOn" mode="out-in"><span :key="todos_counter">{{todos_counter}}</span></transition> items</b></p>

将过渡名称绑定到data: () => ({ animateOn: "none", updatedBefore: false, }), watch: { todos_counter() { if (!this.updatedBefore) { this.updatedBefore = true } else { this.animateOn = "fade" } }（初始值：animateOn），然后在"none"更改时，将此值更改为todo_counter。这样，元素不会在第一次加载时动画。

VueJS：仅在首次加载后启用过渡

3 个答案: