1

I am building application on Vue.js, as part of my application applying background-image to contaniner by JS. Now I want to apply a kind of animation while dynamically changing the background-image and at same time while clearing the background-image.

While changing the image I can apply transition but not working while clearing the value.

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>

I am struggling, can anyone help me with this.

subbu
  • 562
  • 3
  • 8
  • 21
  • You should avoid `background-attachment: fixed` because it causes scroll jank - not to mention that it's completely ignored on iOS. Instead, add a separate `` tag with a fixed position and use JS to add a class to it `onload` for the animation. – volt Jan 24 '20 at 06:22
  • As per my requirements, I should add **background-attachment: fixed**. I can't avoid that. – subbu Jan 24 '20 at 06:28
  • Avoid inline CSS, you could have done by adding class easily. – Devang Jan 24 '20 at 06:33
  • Does this answer your question? [CSS3 background image transition](https://stackoverflow.com/questions/9483364/css3-background-image-transition) – Awais Jan 24 '20 at 06:39
  • 1
    @subbu if `background-attachment: fixed` is a hard requirement, then whoever is managing your project has no idea what their doing. – volt Jan 24 '20 at 08:19
  • @subbu maybe you were thinking about position: fixed - no it's absolutely different thing. `kind of animation` but to be precise what kind of - background can disappear or swipe or zoom... – Zydnar Jan 24 '20 at 08:25
  • @Zydnar I can able to apply the transform when changing background-image from URL to another URL. But want to apply transform when I set background-image as none. – subbu Jan 24 '20 at 12:42
  • @subbu to use transform CSS property has to be animable - background-image: none is not - but setting opacity to 0 is. – Zydnar Jan 24 '20 at 14:26
  • @Zydnar I added my code snippet which I have created in my codepen for testing. can you check and help me.https://codepen.io/Grandhi/pen/WNbmLOO – subbu Jan 26 '20 at 10:22
  • @subbu Another problem is, you don't prefetch images, so there is a delay while switching between them. – Zydnar Jan 26 '20 at 14:31

0 Answers0