Testing
HTML
<div ng-app="myApp" class="well wrapper" ng-class="{smoothOpacity:true}">
<div ng-controller="MyController as myc">
<h1 class="wow fadeInRight">Binding</h1>
<input type="text" ng-model="message" class="wow fadeInLeft" data-wow-delay="2s">
<p>{{ message === 'hello'}}</p>
<form ng-submit="updateMessage(newMessage)">
<input type="text" ng-model="newMessage">
<button type="submit">Update</button>
</form>
<p>{{message}}</p>
</div>
</div>
SCSS
.well {
margin: 10px;
}
.wrapper {
opacity: 0;
position: relative;
left: 20px;
-moz-transition: opacity 0.6s ease;
-o-transition: opacity 0.6s ease;
-webkit-transition: opacity 0.6s ease;
transition: opacity 0.6s ease, left 0.6s ease;
}
.smoothOpacity {
opacity: 1;
left: 0;
position: inherit;
}
JAVASCRIPT
new WOW().init();
var myApp = angular.module('myApp',[]);
myApp.controller('MyController', function($scope) {
$scope.message = "hello";
$scope.updateMessage = function(message){
$scope.message = message;
};
});
