JSFiddle - React, Tailwind, and code Playground

by Young11

HTML

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

SCSS

@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;
		position: relative;
		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 5s linear forwards;
	-moz-animation: fadeOut 5s linear forwards;
	-o-animation: fadeOut 5s linear forwards;
	-ms-animation: fadeOut 5s linear forwards;
	animation: fadeOut 5s 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...

Vue

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)
      },...