Применять вид анимации при добавлении / удалении фонового изображения в div - PullRequest
Новая
       5

Применять вид анимации при добавлении / удалении фонового изображения в div

1 голос
/ 24 января 2020

Я создаю приложение на Vue. js, так как часть моего приложения применяет background-image к contaniner с помощью JS. Теперь я хочу применить вид анимации при динамическом изменении фонового изображения и в то же время при очистке фонового изображения.

При изменении изображения я могу применить переход, но не работать при очистке значения. 

const ele = document.getElementsByClassName('container')[0];

function change() {  
  ele.style.backgroundImage  = 'url(https://unsplash.it/1925/950?image=1005)';
}

function change2() {  
  ele.style.backgroundImage  = 'url(https://unsplash.it/1925/950?image=1006)';
}

function change3() {  
  ele.style.backgroundImage  = 'url(https://unsplash.it/1925/950?image=1004)';
}

function reset() {
  ele.style.backgroundImage  = 'none';
}
button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.reset {
  background-color: #f44336;
}

.container {
  width: 700px;
  height: 300px;
  background-color: transparent;
  background-image: url('https://unsplash.it/1925/950?image=1003');
  background-repeat: repeat;
  background-size: cover;
}

.tran {
  transition-duration: 1s;
  transition-property: background;
  transition-timing-function: linear;
  transition-delay: 0.5s;
}
<div class="container tran"></div>
<button onClick="change()">Change</button>
<button onClick="change2()">Change2</button>
<button onClick="change3()">Change3</button>
<button class="reset" onClick="reset()">Reset</button>

Я борюсь, может кто-нибудь помочь мне с этим.

...