{"action":"created","issue":{"url":"https://api.github.com/repos/mozilla/webmaker-app/issues/859","labels_url":"https://api.github.com/repos/mozilla/webmaker-app/issues/859/labels{/name}","comments_url":"https://api.github.com/repos/mozilla/webmaker-app/issues/859/comments","events_url":"https://api.github.com/repos/mozilla/webmaker-app/issues/859/events","html_url":"https://github.com/mozilla/webmaker-app/pull/859","id":56107195,"number":859,"title":"Fixes #833:  Add animation to icon chooser","user":{"login":"gesa","id":782056,"avatar_url":"https://avatars.githubusercontent.com/u/782056?v=3","gravatar_id":"","url":"https://api.github.com/users/gesa","html_url":"https://github.com/gesa","followers_url":"https://api.github.com/users/gesa/followers","following_url":"https://api.github.com/users/gesa/following{/other_user}","gists_url":"https://api.github.com/users/gesa/gists{/gist_id}","starred_url":"https://api.github.com/users/gesa/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gesa/subscriptions","organizations_url":"https://api.github.com/users/gesa/orgs","repos_url":"https://api.github.com/users/gesa/repos","events_url":"https://api.github.com/users/gesa/events{/privacy}","received_events_url":"https://api.github.com/users/gesa/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":{"login":"k88hudson","id":1455535,"avatar_url":"https://avatars.githubusercontent.com/u/1455535?v=3","gravatar_id":"","url":"https://api.github.com/users/k88hudson","html_url":"https://github.com/k88hudson","followers_url":"https://api.github.com/users/k88hudson/followers","following_url":"https://api.github.com/users/k88hudson/following{/other_user}","gists_url":"https://api.github.com/users/k88hudson/gists{/gist_id}","starred_url":"https://api.github.com/users/k88hudson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/k88hudson/subscriptions","organizations_url":"https://api.github.com/users/k88hudson/orgs","repos_url":"https://api.github.com/users/k88hudson/repos","events_url":"https://api.github.com/users/k88hudson/events{/privacy}","received_events_url":"https://api.github.com/users/k88hudson/received_events","type":"User","site_admin":false},"milestone":null,"comments":4,"created_at":"2015-01-31T01:46:52Z","updated_at":"2015-02-04T17:44:37Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/mozilla/webmaker-app/pulls/859","html_url":"https://github.com/mozilla/webmaker-app/pull/859","diff_url":"https://github.com/mozilla/webmaker-app/pull/859.diff","patch_url":"https://github.com/mozilla/webmaker-app/pull/859.patch"},"body":"It's kind of hackey, but it's sort of the easiest best solution rn.\r\n\r\nOriginally I thought I was going to use the image names as css classes, but that idea ultimately didn't pan out. That said, I'm leaving the conversion of `app.iconImage` from path to name because I do think it's a more elegant solution, and leaves `app.iconImage` as a more re-usable piece of the data."},"comment":{"url":"https://api.github.com/repos/mozilla/webmaker-app/issues/comments/72901771","html_url":"https://github.com/mozilla/webmaker-app/pull/859#issuecomment-72901771","issue_url":"https://api.github.com/repos/mozilla/webmaker-app/issues/859","id":72901771,"user":{"login":"k88hudson","id":1455535,"avatar_url":"https://avatars.githubusercontent.com/u/1455535?v=3","gravatar_id":"","url":"https://api.github.com/users/k88hudson","html_url":"https://github.com/k88hudson","followers_url":"https://api.github.com/users/k88hudson/followers","following_url":"https://api.github.com/users/k88hudson/following{/other_user}","gists_url":"https://api.github.com/users/k88hudson/gists{/gist_id}","starred_url":"https://api.github.com/users/k88hudson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/k88hudson/subscriptions","organizations_url":"https://api.github.com/users/k88hudson/orgs","repos_url":"https://api.github.com/users/k88hudson/repos","events_url":"https://api.github.com/users/k88hudson/events{/privacy}","received_events_url":"https://api.github.com/users/k88hudson/received_events","type":"User","site_admin":false},"created_at":"2015-02-04T17:44:37Z","updated_at":"2015-02-04T17:44:37Z","body":"I'm seeing a lot of jank during the transition esp. in chrome and android 4.4, and the image that's transitioning in just pops in (no transition). Maybe this is because they need to be preloaded and/or background transitions just don't perform well?\r\n\r\nWhat if you just did something like render all the images with a repeater and set them to  `v-show: $index === currentIconIndex` and add the `v-transition` property?\r\n\r\nthen you could add like \r\n```\r\ntransition: transform 0.6s ease;\r\ntransform: translateX(0);\r\n&.v-enter {\r\n    transform: translateX(-100%);\r\n}\r\n&.v-leave {\r\n    transform: translateX(100%);\r\n}\r\n```\r\nto the `.icon-image` class instead\r\n"}}