button transition with $enable-shadows:true not working properly

Created by: wojtask9

see: http://jsfiddle.net/aze0jzj5/6/

steps to reproduce: click and hold button for 1sec and then release mouse button

result: focus outline flickers

This is because BS tries transition from box-shadow: inset to box-shadow: outer

According to https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_buttons.scss#L89 you can disable inset by setting $btn-active-box-shadow:none but that will not work because in other places passing 'none' to box-shadow causes incorrect css rule (for example box-shadow: none, 1px 1px 1px black)

Solution that can be worth consider: http://tobiasahlin.com/blog/how-to-animate-box-shadow/