0

Столкнулся с проблемой , что у меня при изменении позиции на кнопку Change position блок перемещается только по первым трем позициям. top-left top-center top-right, после позиции не меняются, не могу понять из-за чего ?

const app = new Vue({
  el: '#app',
  props: {
    timeout: {
      type: Number,
      default: 5000
    }
  },
  data() {
    return {
      currentElement: 0,
      value: null,
      fadeOut: null,
      runProgress: null,
      animate: false,
      firstItem: [{
          class: 'top-left',
        },
        {
          class: 'top-center',
        },
        {
          class: 'top-right',
        },
        {
          class: 'midle-left',
        },
        {
          class: 'midle-center',
        },
        {
          class: 'midle-right',
        },
        {
          class: 'footer-left',
        },
        {
          class: 'footer-center',
        },
        {
          class: 'footer-right',
        },
      ],
      color: 0,
      changColor: [{
          class: 'blue-color',
          img: 'img/infocircle.png'
        },
        {
          class: 'green-color',
          img: 'img/accept.png'
        },
        {
          class: 'grey-color',
          img: 'img/infocircle.png'
        },
        {
          class: 'orange-color',
          img: 'img/warning.png'
        },
        {
          class: 'red-color',
          img: 'img/X.png'
        },
      ],
      messages: []
    }
  },
  methods: {
    setElement() {
      this.currentElement += 1
    },
    changeCollors() {
      this.color += 1
    },
    changeFadeOut: function() {
      this.fadeOut = `fadeOut ${this.timeout}ms linear forwards`
      this.runProgress = `runProgress ${this.timeout}ms linear forwards`
      this.animate = true
    },
    onAnimationEnd: function() {
      setTimeout(() => this.animate = false, 1000);
    },
    changeItemss() {
      let timeStamp = Date.now().toLocaleString();
      this.messages.unshift({
        id: timeStamp,
        colorId: this.color,
        currentElementId: this.currentElement
      })
    },
    hideNotification() {
      setTimeout(function() {
        app.messages.splice(app.messages.length - 1, 1)
      }, app.timeout)
    }
  },
  watch: {
    messages() {
      this.hideNotification()
    }
  },
  mounted() {
    this.hideNotification()
  }
});
@import url(nulstyle.scss);
@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900);

.first-item {   
    display: flex;
    align-items: center;
    height: 8.156vh;
    width: 28.242vw;
    opacity: 0.7;
    filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.25));
    box-shadow: 0px 4px 32px 3px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(1.389vh);
    border-radius: 2.389vh;
    overflow: hidden; 
    position: relative; 
    margin-bottom: 0.8vh;
    &__messages__list {
        display: flex;
    flex-direction: column-reverse;
    position: fixed;
    top: 80px;
    right: 16px;
    }
}


.first-item__img {
    height: 5.556vh;
    width: 5.556vh; 
    padding: 1.189vh 1.389vh 0 1.389vh;
}

.first-item__text {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-size: 1.8370vh;
    line-height: 1.3;
    display: flex;
    align-items: center;
    letter-spacing: -0.05em;
    color: #FFFFFF;
    text-shadow: 0px 0.4px 4px rgba(0, 0, 0, 0.5);
    padding-top: 2.189vh;
    margin-top: 0;
    &.error {
        background: linear-gradient(90.49deg, #FF0000 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
    } 
    &.greay {
        background: linear-gradient(90.49deg, #BBBBBB 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
    }
}
 
 .first-item__progress {
    position: absolute;
    bottom: 0px;
    width: 0%;
    border-bottom: 0.512vh solid #FFFFFF;;
 }

 .first-item {
    -webkit-animation: fadeOut 50s linear forwards;
    -moz-animation: fadeOut 50s linear forwards;
    -o-animation: fadeOut 50s linear forwards;
    -ms-animation: fadeOut 50s linear forwards;
    animation: fadeOut 50s linear forwards;
}

.first-item__progress {
    -webkit-animation: runProgress 5s linear forwards;
    -moz-animation: runProgress 5s linear forwards;
    -o-animation: runProgress 5s linear forwards;
    -ms-animation: runProgress 5s linear forwards;
    animation: runProgress 5s linear forwards;
}

@-webkit-keyframes fadeOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; -webkit-transform: translateY(0px);}
    100% { opacity: 0; -webkit-transform: translateY(-25px);}
}
 
@-webkit-keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 100%; }
}
 
@-moz-keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 100%; }
}
 
@-o-keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 100%; }
}
 
@-ms-keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 100%; }
}
 
@keyframes runProgress {
    0%{ width: 0%; }
    100%{ width: 100%; }
}



.top-left {
    position: relative;
    left: 10px;
}
 
.top-center {
    position: relative;
    left: calc(50% - 28.242vw / 2);
}

.top-right {
    position: relative;
    left: calc(99% - 28.242vw);
}

.midle-left {
    position: relative;
    top: calc(50% - 8.156vh);
}

.midle-center {
    position: relative;
    top: calc(50% - 8.156vh);
    left: calc(50% - 28.242vw / 2);
}

.midle-right {
    position: relative;
    top: calc(50% - 8.156vh);
    left: calc(99% - 28.242vw);
}

.footer-left {
    position: relative;
    top: calc(99% - 8.156vh);
}

.footer-center {
    position: relative;
    top: calc(99% - 8.156vh);
    left: calc(50% - 28.242vw / 2);
}

.footer-right {
    position: relative;
    top: calc(99% - 8.156vh);
    left: calc(99% - 28.242vw);
}

.blue-color {
    background: linear-gradient(90.49deg, #007EFF 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.green-color {
    background: linear-gradient(90.49deg, #6FDE00 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.grey-color {
    background: linear-gradient(90.49deg, #BBBBBB 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.orange-color {
    background: linear-gradient(90.49deg, #FF6B00 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}

.red-color {
    background: linear-gradient(90.49deg, #FF0000 3.42%, rgba(0, 0, 0, 0.6) 56.58%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" class="wraper">
      <button @click="setElement">Change position</button>
      <button @click="changeCollors">Color</button>
      <button @click="changeItemss">Items</button>
      <transition-group name="fade" class="mesages__list">
        <section class="first-item" :class="[firstItem[message.currentElementId].class, changColor[message.colorId].class]" v-bind:style="{ animation: fadeOut }" v-on:animationend="onAnimationEnd" v-for="message in messages" :key="message.id">
          <img class="first-item__img" src="img/infocircle.png" :src="changColor[message.colorId].img">
          <p class="first-item__text">{{message.id}}</p>
          <div class="first-item__progress" v-bind:style="{ animation: runProgress }" v-on:animationend="onAnimationEnd"></div>
        </section>
      </transition-group>
    </div>

1 ответ 1

1

Дело в том, что после нескольких нажатий на кнопки происходит выход за границу массива. После чего vue идёт в отказ. Надо проверять на длину массива. Например, так:

    setElement() {
      this.currentElement = (1 + this.currentElement) % this.firstItem.length;
    },
    changeCollors() {
      this.color = (1 + this.color) % this.changColor.length;
    },

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.