Light flicker

[mornir]

Bonjour !

I converted an react/react-overdrive app into a vue/vue-overdrive one. Everything works fine, except for a light flicker appearing when I go back to the home page (either by clicking the logo or the go back button of the browser).

Live demo of the app: https://clever-hopper-9a9c46.netlify.com/#/ Repo of the app: https://github.com/mornir/vue-movies

I think the problem might be related to the fetch call to the movie API messing with the animation.

[mattrothenberg]

Hey @mornir, thanks for filing this issue.

After looking at your repo, I do think this issue is being exacerbated (if not caused) by the async API calls. However, here are a few things in your code that are making the flicker more prominent:

1. https://github.com/mornir/vue-movies/blob/master/src/components/Movie.vue#L23 If you remove this transition, the flicker _definitely goes away. Note how if you increase the transition duration, the flicker is even more prominent.

2. https://github.com/mornir/vue-movies/blob/master/src/components/MovieDetails.vue I'd suggest adding some kind of loading prop to this component (initialized to false), that resolves to true once your movie data comes back from IMDB. Otherwise, overdrive kind of freaks out when it tries to access movie.id.

Pseudocode below.

<overdrive :id="movie.id" v-if="loaded">
  <img :src="`https://image.tmdb.org/t/p/w154${movie.poster_path}`" :alt="this.movie.title" width="154">
</overdrive>

data() {
    return {
      key: '',
      movie: {},
      loaded: false
    }
  },
async created() {
    try {
      const res = await axios(`https://api.themoviedb.org/3/movie/${this.id}?api_key=${this.key}`)
      this.movie = res.data
      this.loaded = true
    } catch (e) {
      console.log(e)
    }
  },

Let me know if these adjustments make any difference, and we'll take it from there.

[mornir]

Thanks for looking into this.

Ohh! So the bug actually comes from the box-shadow transition :open_mouth:

After opening the Animation Inspector in the Chrome DevTools, I saw that the browser was animating the opacity property on all the images :frowning:

So instead of targeting all properties with "transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1)", I targeted only the box-shadow: transition: box-shadow 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); And it solved the problem 👍

Yes, using a prop to wait for the data to come back made the animation smoother and got rid of that error in the console :wink:

I am very happy with the result :smile:

[mattrothenberg]

Awesome! I'm happy you figured it out.

Thanks for testing out the library 😛

On Feb 17, 2018 11:39, "Jérôme Pott" notifications@github.com wrote:

Thanks for looking into this.

Ohh! So the bug actually comes from the box-shadow transition 😮

After opening the Animation Inspector in the Chrome DevTools, I saw that the browser was animating the opacity property on all the images 😦

So instead of targeting all properties with "transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1)", I targeted only the box-shadow: transition: box-shadow 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); And it solved the problem 👍

Yes, using a prop to wait for the data to come back made the animation smoother and got rid of that error in the console 😉

I am very happy with the result 😄

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/mattrothenberg/vue-overdrive/issues/4#issuecomment-366453499, or mute the thread https://github.com/notifications/unsubscribe-auth/AE6PtHQr2QRe-EVCUqWD1tBGWQeEiC4Tks5tVwDYgaJpZM4SJRnX .