Mixing
Bind dynamic @keyframes rule to Vue's `:style` property
up vote
0
down vote
favorite
I've wanted to create a border animation when user is waiting for status update over websocket.
It's using working like this: once status is sent, I'm adding a loading class that uses css rule animation: borderAnimation 2s infinite and wanted to define keyframes for this animation dynamically, by binding to this element also :style='myDynamicKeyframesDefinition' which looks like this:
// this is a computed property
myDynamicKeyFramesDefinition () {
return `@keyframes borderAnimation {
0% {border: 2px solid ${this.currentStatusColor}}
50% {border: 2px solid ${this.nextStatusColor}}
100% {border: 2px solid ${this.currentStatusColor}}}`
}
Reason why I'm using such approach is that I've got plenty status codes that user can toggle between so writing down all combinations would be probably highly ineffective (since these can change in the future so maintaining this would be even worse)
I'm not sure if it's even possible - any help will be very appreciated!
css vue.js sass vuejs2
asked 2 days ago
mrmnmly
2,30152659
add a comment |
up vote
0
down vote
favorite
I've wanted to create a border animation when user is waiting for status update over websocket.
It's using working like this: once status is sent, I'm adding a loading class that uses css rule animation: borderAnimation 2s infinite and wanted to define keyframes for this animation dynamically, by binding to this element also :style='myDynamicKeyframesDefinition' which looks like this:
// this is a computed property
myDynamicKeyFramesDefinition () {
return `@keyframes borderAnimation {
0% {border: 2px solid ${this.currentStatusColor}}
50% {border: 2px solid ${this.nextStatusColor}}
100% {border: 2px solid ${this.currentStatusColor}}}`
}
Reason why I'm using such approach is that I've got plenty status codes that user can toggle between so writing down all combinations would be probably highly ineffective (since these can change in the future so maintaining this would be even worse)
I'm not sure if it's even possible - any help will be very appreciated!
css vue.js sass vuejs2
asked 2 days ago
mrmnmly
2,30152659
1
Never saw @keyframes rules in inline-style's instead why dont you try with css transition-property: border-color; transition-duration: 400ms; transition-timing-function: ease-in-out; and change the border-color in inline-style as per your logic. as I see you are not trying to animate width and height of the border.
– vssadineni
2 days ago
will try that out - thank you!
– mrmnmly
2 days ago
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I've wanted to create a border animation when user is waiting for status update over websocket.
It's using working like this: once status is sent, I'm adding a loading class that uses css rule animation: borderAnimation 2s infinite and wanted to define keyframes for this animation dynamically, by binding to this element also :style='myDynamicKeyframesDefinition' which looks like this:
// this is a computed property
myDynamicKeyFramesDefinition () {
return `@keyframes borderAnimation {
0% {border: 2px solid ${this.currentStatusColor}}
50% {border: 2px solid ${this.nextStatusColor}}
100% {border: 2px solid ${this.currentStatusColor}}}`
}
Reason why I'm using such approach is that I've got plenty status codes that user can toggle between so writing down all combinations would be probably highly ineffective (since these can change in the future so maintaining this would be even worse)
I'm not sure if it's even possible - any help will be very appreciated!
css vue.js sass vuejs2
asked 2 days ago
mrmnmly
2,30152659
I've wanted to create a border animation when user is waiting for status update over websocket.
It's using working like this: once status is sent, I'm adding a loading class that uses css rule animation: borderAnimation 2s infinite and wanted to define keyframes for this animation dynamically, by binding to this element also :style='myDynamicKeyframesDefinition' which looks like this:
// this is a computed property
myDynamicKeyFramesDefinition () {
return `@keyframes borderAnimation {
0% {border: 2px solid ${this.currentStatusColor}}
50% {border: 2px solid ${this.nextStatusColor}}
100% {border: 2px solid ${this.currentStatusColor}}}`
}
Reason why I'm using such approach is that I've got plenty status codes that user can toggle between so writing down all combinations would be probably highly ineffective (since these can change in the future so maintaining this would be even worse)
I'm not sure if it's even possible - any help will be very appreciated!
css vue.js sass vuejs2
css vue.js sass vuejs2
asked 2 days ago
mrmnmly
2,30152659
asked 2 days ago
mrmnmly
2,30152659
asked 2 days ago
mrmnmly
2,30152659
asked 2 days ago
mrmnmly
2,30152659
asked 2 days ago
mrmnmly
2,30152659
2,30152659
1
Never saw @keyframes rules in inline-style's instead why dont you try with css transition-property: border-color; transition-duration: 400ms; transition-timing-function: ease-in-out; and change the border-color in inline-style as per your logic. as I see you are not trying to animate width and height of the border.
– vssadineni
2 days ago
will try that out - thank you!
– mrmnmly
2 days ago
add a comment |
1
Never saw @keyframes rules in inline-style's instead why dont you try with css transition-property: border-color; transition-duration: 400ms; transition-timing-function: ease-in-out; and change the border-color in inline-style as per your logic. as I see you are not trying to animate width and height of the border.
– vssadineni
2 days ago
will try that out - thank you!
– mrmnmly
2 days ago
1
1
Never saw @keyframes rules in inline-style's instead why dont you try with css transition-property: border-color; transition-duration: 400ms; transition-timing-function: ease-in-out; and change the border-color in inline-style as per your logic. as I see you are not trying to animate width and height of the border.
– vssadineni
2 days ago
Never saw @keyframes rules in inline-style's instead why dont you try with css transition-property: border-color; transition-duration: 400ms; transition-timing-function: ease-in-out; and change the border-color in inline-style as per your logic. as I see you are not trying to animate width and height of the border.
– vssadineni
2 days ago
will try that out - thank you!
– mrmnmly
2 days ago
will try that out - thank you!
– mrmnmly
2 days ago
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373672%2fbind-dynamic-keyframes-rule-to-vues-style-property%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Never saw @keyframes rules in inline-style's instead why dont you try with css transition-property: border-color; transition-duration: 400ms; transition-timing-function: ease-in-out; and change the border-color in inline-style as per your logic. as I see you are not trying to animate width and height of the border.
– vssadineni
2 days ago
will try that out - thank you!
– mrmnmly
2 days ago