Как пользователь может сам задать длительность анимации?

Question

[Young11]

Не могу понять , как присвоить значение которое ввел пользователь к fadeOut ?

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
   <div id="app" class="wraper">
      <div class="notifacation" id="notifacation">
         <input v-model="value">
            {{ value }}
         <button v-on:click="changeWidth()">Change</button>
         <section class="first-item" v-bind:style="{ fadeOut: computedfadeOut }">
            <img class="first-item__img" src="img/infocircle.png" alt="infocircle">
            <p class="first-item__text">Текстовый текст, что б его! Текстовый текст, что б его! <br>
            Текстовый текст, что б его! Текстовый текст, что б его!</p>
            <div class="first-item__progress"></div>
         </section>
      </div>
   </div>

@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: 9.556vh;
   width: 38.542vw;
   opacity: 0.7;
   filter: drop-shadow(0px 6px 8px rgba(0, 0, 0, 0.25));
   background: linear-gradient(90.49deg, #007EFF 0.42%, rgba(0, 0, 0, 0.6) 95.58%);
   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; 
}

.first-item__img {
	float: left;
   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: 2.03704vh;
   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;
}

.first-item__progress {
	position: absolute;
    bottom: 0px;
    width: 0%;
    border-bottom: 0.512vh solid #FFFFFF;;
}


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

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

@-webkit-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -webkit-transform: translateY(0px);}
	99% { opacity: 0; -webkit-transform: translateY(-25px);}
	100% { opacity: 0; }
}

@-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%; }
}

new Vue({
   el: '#app',
   data: {
     value: null,
     fadeOut: 0
   },
   computed: {
      computedfadeOut: function () {
        return this.value;
      }
    },
    methods: {
      changefadeOut: function (event) {
        this.value= fadeOut;
      }
    }
 });

Comments

[WapSter]

Зачем ты в computed возвращаешь значение из data это свойство уже реактивно и никак не преобразовывается, бессмыслено.

methods: {
      changefadeOut: function (event) {
        this.value= fadeOut;
      }
    }

Откуда у тебя взялась переменная fadeOut?

Касательно ответа. Просто манипулируй свойством animation-duration.

И из вопроса понятно, что ты не знаешь ни верстку ни js. Может пока рановато изучать vue

Answer 1

[GeminiX]

Может computed свойство должно возвращать fadeOut, а в методе changefadeOut наоборот this. fadeOut = value?

Comments

[Young11]

исправил , но длительность так и не поменялась (

[GeminiX]

1. У вас разные имена методов changefadeOut и changeWidth
2. Не знаю как вы хотите перезапускать анимацию по нажатию кнопки
3. Накидал вариант, вводите значение, жмете change и ваше окно затухает с заданной длительностью

changeFadeOut: function () {
				this.fadeOut = `fadeOut ${this.value}s linear forwards`
			  }

https://codepen.io/geminixandroid/pen/OJQrWYb

[Young11]

Работает , только столкнулся с проблемой , что если изменить один раз и допустим потом заменить второй раз , то время не применяется ,а теперь столкнулся с проблемой , у меня время должно это же задаваться , для белой линии и самого блока , то есть для fadeOut, runProgress , указал я их

html
<button v-on:click="change">Change</button>
<section class="first-item" v-bind:style="{ animation: fadeOut, runProgress }">
vue
var app = new Vue({
  el: '#app',
  data: {
  value: null,
  fadeOut: null,
  runProgress: null
  },
 methods: {
   change: function () {
   this.fadeOut = `fadeOut ${this.value}s linear forwards`,
   this.runProgress = `runProgress ${this.value}s linear forwards`
   }
 }
});

эффект не применяется для белой линии прогресса , а эта линия просто стоит на месте

[Young11]

<section class="first-item" v-bind:style="{ animation:  runProgress }">

Оставил только эту анимацию, и у меня увеличивается полоса и сам блок в течении заданного мной времени

[GeminiX]

Young11, у first-item вы делаете вычисляемый стиль runProgress, который собой представляет просто строку, и так не получится
"{ animation: fadeOut, runProgress }"

[Young11]

Александр,

<div class="first-item__progress" v-bind:style="{ animation: runProgress }"></div>

Добавил и все получилось , только не могу понять , у меня эта линия когда я допустим задал 20 в input , появляется где-то может в районе 15% , а не с самого начала , из-за чего это связано ?

[GeminiX]

Young11, полагаю у вас что-то с анимацией не так прописано, непонятно про 0.7s что оно дает, ещё и прозрачность по шагам

[Young11]

Александр, я понял в чем проблема , допустим я задаю анимацию в районе 3 секунд , у меня она до нажатии на кнопку в невидимости уже происходит , то есть , если я допустим напишу время анимации после обновление страницы через 8 секунд , задам анимацию в в районе 10 секунд у меня выводится анимация которая была проиграна уже 8 секунд , как это можно пофиксить , чтобы анимация начиналась по нажатию , а не после обновления страницы ?

[GeminiX]

Young11, типа того https://stackoverflow.com/questions/47633904/how-t...

[Young11]

Александр, прочитал то , что вы скинули и как я понял , я должен сделать @click которая будет добавлять ?

v-bind:style="{ animation: runProgress }" или v-bind:style="{ animation: fadeOut}"

[GeminiX]

Young11, да и подписаться на событие, что анимация закончилась

v-on:animationend

и по событию убирать стили, которые делают анимаци

[Young11]

Александр, не сильно пойму как это написать , у меня получается в кнопке да клика

<button v-on:click="change" @click="show = !show" v-if="animation">Change</button>

А для секции я должен добаить v-show

<section class="first-item" v-show = "show" v-bind:style="{ animation: fadeOut }">

или как ?

[GeminiX]

Young11, накидал примерно https://codepen.io/geminixandroid/pen/OJQrWYb

[Young11]

Александр, Благодарю за помощь