Vue: Transitions don't work on Electron

[snapeuh]

Hello,

I am using Vue for my app and I packaged it as an Electron app. Unfortunately I noticed that the transitions weren't working on Electron (while it is on Chrome or Safari).

I loaded the documentation page about Transitions on electron-quick-start (on Github) and _most_ examples don't work.

I am using a transition with a dynamic name in out-in mode. I tested on a Mac.

Any hint on why it doesn't work on Electron?

Regards,

Romain.

[posva]

I tested by adding window.location = 'https://vuejs.org/v2/guide/transitions.html' to the index.html file and they all work nicely. can you please be more precise?

[snapeuh]

Hey,

Here's my steps to reproduce :

git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install

The output from npm install tells me that it installed [email protected].

Then I edit the main.js with :

mainWindow.loadURL('https://vuejs.org/v2/guide/transitions.html')

Here's a link to the whole file on Gist : Here.

I run npm start. It loads Electron, loads the Vue.js website and if I click on the first Toggle button and there's no animation happening. Same for the next at least 5 examples.

Tested on Mac 10.11.6 (El Capitan).

Regards,

Romain.

[snapeuh]

I did a little screencast so you can see what I am experiencing :

http://re.d.pr/14guc

[posva]

Can you try using the latest version of electron, please?
Can you share the output of clientInformation.appVersion, please?
edit: I tried with electron 1.4.1 and it works too

[snapeuh]

I tried with Electron 1.6.0 and I have the same problem.

I didn't find how to use clientInformation.appVersion and I obviously had this error :

ReferenceError: clientInformation is not defined

Are you on Mac? Which OS version?

Also I have this error on the console :

```
Uncaught ReferenceError: FastClick is not defined at HTMLDocument. (transitions.html:1502)
````

I don't think it's linked because that error doesn't show up on my app and still transitions don't work.

Just to be clear, it works on Chrome and Safari without any issue.

Thanks for looking into it! 😊

[posva]

I have Sierra (10.12.3)

I didn't find how to use clientInformation.appVersion and I obviously had this error

Well, that's weird. Could it be you have an older non-supported version? Not sure about how to clean that cache, though

[snapeuh]

Hey,

I figured out I just needed to type that on the inspector console, I previously did a console.log on main.js which obviously failed, here's the output :

5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) electron-quick-start/1.0.0 Chrome/56.0.2924.87 Electron/1.6.0 Safari/537.36

I tested on Windows and Linux and it worked without any issue. It's just strange it doesn't work on my platform which is only 1 version behind the current Mac OS release.

Do you have any hint?

If you don't, please close the issue as it works like a charm on other platforms.

Romain.

[posva]

I'm sorry, I really don't know what may be causing that...
I tested with the same versions except for the os X version. It'd be very strange if that's the issue 😆
Closing since there's nothing we can do. If you find out the problem, please, come back and share 😄

[JanGunzenhauser]

@snapeuh Same issue on OS X 10.12.5. It works after adding a duration, e.g.
<transition name="fade" mode="out-in" :duration="350"> ... </transition>

[ToniApps]

Same fail

[achimkoellner]

Same on OSX 10.11.6

[vdcrea]

Thanks @JanGunzenhauser, it works with duration. https://github.com/vuejs/vue/issues/4894#issuecomment-308555683

[SteffenDE]

Strange, same issue with
5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) electron-quick-start/1.0.0 Chrome/58.0.3029.110 Electron/1.7.9 Safari/537.36

Unfortunately I can't use the duration workaround, since I'm using vuetify's transitions:
window.location = 'https://vuetifyjs.com/motion/transitions'

The in transition works but the out transition doesn't...

[phablulo]

Same issue with 5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) electron-open-app/1.0.0 Chrome/61.0.3163.100 Electron/2.0.5 Safari/537.36 on a Mac OS High Sierra 10.13.5 and Electron 2.0.5 (latest).

Transitions works only when duration is bigger than 1s. Otherwise it fails even when using the duration tag.

[phablulo]

After some while I found the problem:
floating point numbers on the object returned by Electron's window.getComputedStyle comes with a comma instead of a dot. Thus Vue will always parse it as 0 as we can see here.

I submitted a PR to fix this.

[SteffenDE]

Thank you @phablulo, let's hope this gets merged soon!
This is the mentioned pull request: https://github.com/vuejs/vue/pull/8495