{"action":"created","issue":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/4801","repository_url":"https://api.github.com/repos/NativeScript/NativeScript","labels_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/4801/labels{/name}","comments_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/4801/comments","events_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/4801/events","html_url":"https://github.com/NativeScript/NativeScript/issues/4801","id":255267103,"number":4801,"title":"Css animation stopped if app inactive","user":{"login":"bumbella","id":6078107,"avatar_url":"https://avatars0.githubusercontent.com/u/6078107?v=4","gravatar_id":"","url":"https://api.github.com/users/bumbella","html_url":"https://github.com/bumbella","followers_url":"https://api.github.com/users/bumbella/followers","following_url":"https://api.github.com/users/bumbella/following{/other_user}","gists_url":"https://api.github.com/users/bumbella/gists{/gist_id}","starred_url":"https://api.github.com/users/bumbella/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/bumbella/subscriptions","organizations_url":"https://api.github.com/users/bumbella/orgs","repos_url":"https://api.github.com/users/bumbella/repos","events_url":"https://api.github.com/users/bumbella/events{/privacy}","received_events_url":"https://api.github.com/users/bumbella/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-09-05T12:53:48Z","updated_at":"2017-09-05T14:48:26Z","closed_at":null,"author_association":"NONE","body":"I use this css animation and if I click dial number then phone number calling and if I back to the app the animation was stopped.\r\nPlease help me what is wrong in my code.\r\nThanx\r\n\r\n```\r\n<StackLayout class=\"sideStackCallCenter\" (tap)=\"dialCallCenter()\">\r\n    <Label class=\"sideStackCallCenterText pulse\"\r\n                text=\"Callcenter hívása\"></Label>\r\n</StackLayout>\r\n```\r\n\r\n```\r\n.pulse{\r\n  animation-name: pulse_animation;\r\n  animation-duration: 1000ms;\r\n  animation-iteration-count: infinite;\r\n  animation-timing-function: linear;\r\n}\r\n\r\n@keyframes pulse_animation {\r\n  0% { opacity:1; }\r\n  30% { opacity:1; }\r\n  70% { opacity:0; }\r\n  100% { opacity:1; }\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/NativeScript/NativeScript/issues/comments/327199511","html_url":"https://github.com/NativeScript/NativeScript/issues/4801#issuecomment-327199511","issue_url":"https://api.github.com/repos/NativeScript/NativeScript/issues/4801","id":327199511,"user":{"login":"tsonevn","id":17448734,"avatar_url":"https://avatars3.githubusercontent.com/u/17448734?v=4","gravatar_id":"","url":"https://api.github.com/users/tsonevn","html_url":"https://github.com/tsonevn","followers_url":"https://api.github.com/users/tsonevn/followers","following_url":"https://api.github.com/users/tsonevn/following{/other_user}","gists_url":"https://api.github.com/users/tsonevn/gists{/gist_id}","starred_url":"https://api.github.com/users/tsonevn/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tsonevn/subscriptions","organizations_url":"https://api.github.com/users/tsonevn/orgs","repos_url":"https://api.github.com/users/tsonevn/repos","events_url":"https://api.github.com/users/tsonevn/events{/privacy}","received_events_url":"https://api.github.com/users/tsonevn/received_events","type":"User","site_admin":false},"created_at":"2017-09-05T14:48:26Z","updated_at":"2017-09-05T14:48:26Z","author_association":"CONTRIBUTOR","body":"Hi @bumbella,\r\nThank you for pointing this issue.\r\nI tested this scenario and indeed the animation will be canceled, while the app is suspended, and it will not be restart while using infinity option. I was able to reproduce this behavior also in a pure NativeScirpt project. I am attaching sample project, which could be used for debugging.\r\n\r\nWe will investigate further this issue and will verify whether this is a real bug. \r\n\r\nIn the meantime, I could suggest to setup the animation from code behind and to reset it on application resume event as it is shown in the attached code snippet.\r\n\r\nHTML\r\n```\r\n\r\n<StackLayout class=\"sideStackCallCenter\" (tap)=\"dialCallCenter()\">\r\n    <Label id=\"lvID\" (loaded)=\"loadedlabel($event)\" class=\"sideStackCallCenterText pulse\"\r\n                text=\"Callcenter hívása\"></Label>\r\n</StackLayout>\r\n\r\n```\r\nTypeScript\r\n```\r\nimport { Component, OnInit } from \"@angular/core\";\r\nimport * as enums from \"ui/enums\"\r\nimport { Item } from \"./item\";\r\nimport { ItemService } from \"./item.service\";\r\nimport {Label} from \"ui/label\";\r\nimport {Page} from \"ui/page\"\r\nimport { on as applicationOn, launchEvent, suspendEvent, resumeEvent, exitEvent, lowMemoryEvent, uncaughtErrorEvent, ApplicationEventData, start as applicationStart } from \"application\";\r\n\r\n@Component({\r\n    selector: \"ns-items\",\r\n    moduleId: module.id,\r\n    templateUrl: \"./items.component.html\",\r\n})\r\nexport class ItemsComponent implements OnInit {\r\n    items: Item[];\r\n\r\n    constructor(private itemService: ItemService, private page:Page) { \r\n        applicationOn(resumeEvent, (args: ApplicationEventData) => {\r\n            console.log(\"on app resume\")\r\n\r\n            var label:Label = <Label>this.page.getViewById(\"lvID\");\r\n            label.rotate=0\r\n            label.animate({ rotate: 360,iterations:Number.POSITIVE_INFINITY })\r\n\r\n            .then(function () {\r\n            console.log(\"Animation finished\");\r\n        })\r\n            .catch(function (e) {\r\n            console.log(e.message);\r\n        });\r\n        });\r\n        \r\n    }\r\n\r\n    ngOnInit(): void {\r\n        this.items = this.itemService.getItems();\r\n    }\r\n    public loadedlabel(args){\r\n        var label:Label = <Label>args.object;\r\n        label.animate({ rotate: 360,iterations:Number.POSITIVE_INFINITY })\r\n        .then(function () {\r\n        console.log(\"Animation finished\");\r\n    })\r\n        .catch(function (e) {\r\n        console.log(e.message);\r\n    });\r\n    }\r\n}\r\n```\r\n[Archive.zip](https://github.com/NativeScript/NativeScript/files/1277789/Archive.zip)\r\n"}}
{"actor":{"display_login":"tsonevn"}}