{"action":"created","issue":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/3608","repository_url":"https://api.github.com/repos/NativeScript/NativeScript","labels_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/3608/labels{/name}","comments_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/3608/comments","events_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/3608/events","html_url":"https://github.com/NativeScript/NativeScript/issues/3608","id":206178767,"number":3608,"title":"Animating an element prevents future CSS animations from working","user":{"login":"3rror404","id":1102402,"avatar_url":"https://avatars.githubusercontent.com/u/1102402?v=3","gravatar_id":"","url":"https://api.github.com/users/3rror404","html_url":"https://github.com/3rror404","followers_url":"https://api.github.com/users/3rror404/followers","following_url":"https://api.github.com/users/3rror404/following{/other_user}","gists_url":"https://api.github.com/users/3rror404/gists{/gist_id}","starred_url":"https://api.github.com/users/3rror404/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/3rror404/subscriptions","organizations_url":"https://api.github.com/users/3rror404/orgs","repos_url":"https://api.github.com/users/3rror404/repos","events_url":"https://api.github.com/users/3rror404/events{/privacy}","received_events_url":"https://api.github.com/users/3rror404/received_events","type":"User","site_admin":false},"labels":[{"id":243876040,"url":"https://api.github.com/repos/NativeScript/NativeScript/labels/css","name":"css","color":"1572B6","default":false},{"id":203689647,"url":"https://api.github.com/repos/NativeScript/NativeScript/labels/T:Question","name":"T:Question","color":"fbca04","default":false}],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2017-02-08T12:01:50Z","updated_at":"2017-02-09T16:24:05Z","closed_at":null,"body":"Hi guys,\r\n\r\nI seem to have found a strange bug. Hopefully somebody can think of a workaround, or fix if possible.\r\n\r\nI have an element that I wish to animate on tap.\r\n\r\n```\r\n<GridLayout id=\"message-manual-journey\" class='message message-danger' columns=\"auto, *\" tap=\"tapSyncUnsynced\"  visibility=\"{{ unsyncedJourneys ? 'visible' : 'collapse' }}\">\r\n    <Image col=\"0\" src=\"~/images/exclamation-circle-white@2x.png\" class=\"icon\" />\r\n    <Label col=\"1\" id=\"message-manual-journey-label\" Text=\"Journey data found. Tap to upload.\" />\r\n</GridLayout>  \r\n```       \r\nThe element has the following CSS:\r\n\r\n```\r\n.message-danger {\r\n    background-color: #FB3640;\r\n    border-color: #E13039;\r\n    border-width: 1 0 1 0;\r\n    color: #FFF;\r\n    font-size: 14;\r\n}\r\n```\r\n\r\nWhen this element is tapped I add a CSS class in order to trigger a CSS keyframe animation:\r\n\r\n```\r\nexports.tapSyncUnsynced = function(args) {\r\n    var message = page.getViewById('message-manual-journey');\r\n    message.className = message.className + ' pulse';\r\n}\r\n```\r\n```\r\n@keyframes pulse {\r\n    from { background-color: #bedb39; }\r\n    50% { background-color: #98af2d; }\r\n    100% { background-color: #bedb39; }\r\n}\r\n\r\n#message-manual-journey.pulse {\r\n    border-color: #859927;\r\n    animation-name: pulse;\r\n    animation-duration: 3s;\r\n    animation-iteration-count: infinite;\r\n    animation-delay: .2s;\r\n}\r\n```\r\n\r\nThis works but results in an immediate change from `background-color: #FB3640` (initial colour) to `background-color: #bedb39;` (first stage of keyframe animation). The keyframe animation then runs as expected\r\n\r\nTo work around this I am trying to use the animate module to animate the background colour from `#FB3640` to `#bedb39` before then applying the CSS class. \r\n\r\n```\r\nmessage.animate({ \r\n        backgroundColor: '#bedb39',\r\n        duration: 326,\r\n        curve: enums.AnimationCurve.easeOut\r\n    })\r\n    .then(() => {\r\n        message.className = message.className + ' pulse';\r\n    })\r\n    .catch((e) => {\r\n        console.log(e.message);\r\n    });\r\n```\r\n\r\nI would expect this code to animate the background colour and then apply the CSS class which would in turn trigger the keyframe animation. However the CSS keyframe animation does not run. \r\n\r\nTested on iOS and Android.\r\n\r\n```\r\n┌──────────────────┬─────────────────┬────────────────┬──────────────────┐\r\n│ Component        │ Current version │ Latest version │ Information      │\r\n│ nativescript     │ 2.4.2           │ 2.5.0          │ Update available │\r\n│ tns-core-modules │ 2.4.3           │ 2.5.0          │ Update available │\r\n│ tns-android      │ 2.5.0           │ 2.5.0          │ Up to date       │\r\n│ tns-ios          │ 2.4.0           │ 2.5.0          │ Update available │\r\n└──────────────────┴─────────────────┴────────────────┴──────────────────┘\r\n```"},"comment":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/comments/278692668","html_url":"https://github.com/NativeScript/NativeScript/issues/3608#issuecomment-278692668","issue_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/3608","id":278692668,"user":{"login":"3rror404","id":1102402,"avatar_url":"https://avatars.githubusercontent.com/u/1102402?v=3","gravatar_id":"","url":"https://api.github.com/users/3rror404","html_url":"https://github.com/3rror404","followers_url":"https://api.github.com/users/3rror404/followers","following_url":"https://api.github.com/users/3rror404/following{/other_user}","gists_url":"https://api.github.com/users/3rror404/gists{/gist_id}","starred_url":"https://api.github.com/users/3rror404/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/3rror404/subscriptions","organizations_url":"https://api.github.com/users/3rror404/orgs","repos_url":"https://api.github.com/users/3rror404/repos","events_url":"https://api.github.com/users/3rror404/events{/privacy}","received_events_url":"https://api.github.com/users/3rror404/received_events","type":"User","site_admin":false},"created_at":"2017-02-09T16:24:05Z","updated_at":"2017-02-09T16:24:05Z","body":"Hi @NickIliev,\r\n\r\nyeah I know the first example is working as expected. And that is exactly how I would expect it to behave. It was just an explanation of the problem I'm trying to solve.\r\n\r\nYour suggestion of setting the first stage to the keyframe animation to the red colour won't work unfortunately. The animation needs to loop so it would switch back to red every iteration.\r\n\r\nIn a browser this would be simple as I would just set a transition on the initial state and the smooth colour change would take care of itself.  The only way I can think to do this in Nativescript is how I'm attempting it above with the `.animate()` then add class.\r\n\r\nI've got it working using your code above by calling `animation.play()` in the `.animate()` callback so thanks a lot for the suggestion  👍"}}
{"actor":{"display_login":"3rror404"}}