Question

我通过使用＆＃39; alertTip＆＃39;来观察vuex中的当前值，从而在vue中使用了转换。用于实现淡入和淡出动画的组件，但有时它可以工作，有时它不起作用。当价值发生变化且手表中的功能无效时，＆＃39;提示＆＃39;不能一直消失并显示出来。

如何解决此问题？如果有其他方法可以在没有jQuery的情况下实现淡入和淡出动画。

以下是＆＃39; alertTip＆＃39;的代码。成分：

<template>
  <transition name="slide-fade">
    <div class="info-log" v-if="alertInfo.show">
      <img src="../assets/success-icon.png" alt="success-icon" v-if="alertInfo.success">
      <img src="../assets/error-icon.png" alt="success-icon" v-else>
      <span class="info-text">{{alertInfo.alertText}}</span>
    </div>
  </transition>
</template>


<script>
  import {mapGetters, mapActions} from 'vuex'

  export default {
    data () {
      return {
        value: ''
      }
    },
    props: [],
    mounted () {

    },
    methods: {
      ...mapActions('global', [
        '_ChangeAlertInfo'
      ]),
      showTip () {
        let self = this
        this.show = !this.show
        setTimeout(function () {
          self.show = !self.show
        }, 1300)
      }
    },
    computed: {
      ...mapGetters('global', [
        'alertInfo'
      ])
    },
    watch: {
      'alertInfo.show': {
        deep: true,
        handler (curVal, oldVal) {
          let self = this
          setTimeout(function () {
            self._ChangeAlertInfo({
              'show': false
            })
          }, 1300)
        }
      }
    }
  }
</script>


<style lang="less" scoped>
  .slide-fade-enter-active {
    transition: all .5s ease;
  }
  .slide-fade-leave-active {
    transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
  }
  .slide-fade-enter, .slide-fade-leave-active {
    opacity: 0;
  }
  .info-log {
    position: fixed;
    top: 40%;
    left: 50%;
    z-index: 1111;
    margin-left: -92px;
    min-width: 184px;
    height: 60px;
    border-radius: 5px;
    padding-top: 20px;
    text-align: center;
    color: #FFF;
    background-color: rgba(0,0,0,.5);
    /* IE8 */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000);
    .info-text {
      vertical-align: top;
    }
  }
</style>

在某些情况下，观看vue can不起作用

0 个答案: