drag-drop-directive messing up with transitions and transform in splitter

[didimmova]

Description

When I try to put a transition on the igx-splitter for example, it doesn't work, unless I use it with the !important property because of a line in the drag-drop-directive.ts file that says: this.element.nativeElement.style.transitionDuration = '0.0s';

why is it there and can we make it overridable, without having to use the !important property?

Also I'm using transform to shrink and expand the splitter and when it expands, it doesn't go back again because of a line in the drag-drop-directive, which sets the transform to transform: translate3d(0px, 0px, 0px);, which overrides my transform value. What's strange about it is that it doesn't happen to all the splitters (only with the nested ones, where it stays after the dragging is over).

• igniteui-angular version: all
• browser: all

Steps to reproduce

1. Open the Splitter sample in dev demos
2. Remove the !important property on the transition in the .igx-splitter-bar styles

Result

Transition stops working because transition-duration is set to 0

Expected result

When setting up a transition this transition-duration property should be overridden or if unnecessary - removed.

Attachments