代码之家 › 专栏 › 技术社区 › zerohedge

VueJS:仅在第一次加载后启用转换

vue.js

zerohedge · 技术社区 · 6 年前

我的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\U计数器 第一次加载后更改。

所以基本上我希望初始荷载不包含任何过渡,但是如果在初始构件荷载完成之后 todos\U计数器 改变,我确实希望转变发生。

即使使用 watch 在组件级别上很难,因为从观察者的角度来看 todos_count 在第一页加载时不更改。

0 回复 | 直到 6 年前

Hamada Fadil Mahdi 6 年前

试试这个,希望它能奏效。

在模板中:

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

Decade Moon 6 年前

您可以尝试以下方法:

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

不一定要完全像这样,但你知道的。

zerohedge 6 年前

我采用的方法是:

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

JS公司:

    data: () => ({
        animateOn: "none",
        updatedBefore: false,
    }),

    watch: {
        todos_counter() {
            if (!this.updatedBefore) {
                this.updatedBefore = true
            }
            else {
                this.animateOn = "fade"
            }
        }

将转换名称绑定到 animateOn (初始值: "none" ),然后当 todo_counter 更改,将此值更改为 "fade" . 这样,元素在第一次加载时就不会设置动画。