Nativescript: Add support for CSS transitions

[tzraikov]

Add support for CSS transitions. This includes the following CSS properties:

• [ ] transition
• [ ] transition-delay
• [ ] transition-duration
• [ ] transition-property
• [ ] transition-timing-function

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[facekapow]

Any word on this? I would love to be able to transition my label opacitys.

[konradkubiec]

Is there any architecture overview of CSS animation logic?

I'm not happy with animations (rewinding and dynamic switching between many animations). Transitions will remove all of those problems.

Right now my hypothesis is to use almost the same logic as CSS animations do. The biggest difference is to have additional transitions manager that will:

• stop animation, if a new value is detected for the same property
• recalculate animation using transition properties, current property value as a start position, new property value as a final position
• start the updated animation

Transition manager should watch for CSS transition properties (transition-*) and then for pointed properties changes (transition: width 2s, height 2s, background-color 2s, transform 2s; and then e.g. height: 20;).

In next attempts, I'll try to address animation conflicts (e.g. CSS animation vs transitions) and other unexpected bugs.

As a new NativeScript user and contributor, I'll appreciate all help and guidance.

[tzraikov]

Currently we can't offer an architecture overview. A good starting point could be the animations article in our documentation. Then you can check the source code located here.

[3rror404]

+1. Using the Animation module for simple tasks like transitioning a background colour can be cumbersome.

[BenLorantfy]

Transitions also can do things that animations can't. e.g. animate a value from it's current state. For example, this is how I'm showing/hiding using animations.

@keyframes show {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hide {
  from { opacity: 1; }
  to { opacity: 0; }
}

.hidden {
  animation-name: hide;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.shown {
  animation-name: show;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

The code for a transition would be:

.myThing {
  transition: opacity 0.3s;
  opacity: 1;
}

.hidden {
  opacity: 0;
}

Transitions are smart enough to know to start the new transition at the current value of opacity. e.g. If I add the hidden class and remove it before it's done hiding, it will start the new transition from where it left off. Animations can't do that, they have to start from a value. If I start hiding and removing the hidden class before it's done hiding, it will set the opacity to 0 and then animate it to 1.

I don't want to do imperative animations, but this is making it hard to declarative ones.

[tillsanders]

I'm still looking forward to transitions. Is this just low priority, or are there technical difficulties?