famo.us - How do you blur an image using the famous framework? -

famo.us - How do you blur an image using the famous framework? -

how blur image in famous? css equivalent of -webkit-filter: blur(5px);.

bonus points illustration of how within famous/angular combination.

i hoping like:

<fa-modifier fa-blur="5"> <fa-image-surface fa-image-url="coolimage.png" fa-size="[640,320]"> </fa-image-surface> </fa-modifier>

after actions i'd love able animate blur "un-blurred".

so far way i've found utilize css.

<fa-image-surface class="{{blurclass}}" fa-image-url="coolimage.png" fa-size="[640,320]" fa-click="imageclick()"> </fa-image-surface>

in controller

$scope.blurclass = "blur-in"; // start no blur $scope.imageclick = function() { $scope.blurclass = "blur-out"; // animate blur }

in .css

.blur-out { -webkit-filter: blur(8px); -webkit-transition: 0.1s ease-out; transition: 0.1s ease-out; } .blur-in { -webkit-filter: blur(0px); -webkit-transition: 0.1s ease-in; transition: 0.1s ease-in; }

famo.us famous-angular