Is ng-option animation aware in angulajs 1.4? - javascript

I'm trying to use ngAnimate(v1.4) for ng-option but I couldn't find any animate event for it in angularjs documentation. Does anyone know if ng-option directive animation aware? Can anyone provide a link for reference or an example?
I'm trying to add animation to select2 dropdown using angularjs ngAnimate. But not able to do so. See the fiddle https://jsfiddle.net/ashishU/o6ojj9xs/
I'm not sure which ngAnimate event to add the animation to. It doesn't seem to work.
Below is my code:
HTML
<div ng-app="testApp">
<div ng-controller="testCtrl">
<select class="dd1" ng-model="dropDown1" ng-options="value for value in dropDownValue1">
<option value="">{{dropDownName1}}</option>
</select>
JAVASCRIPT
angular.module("testApp", ["ngAnimate"]).controller("testCtrl", function($scope) {
$scope.dropDownName1 = "animateDD1";
$scope.dropDownValue1 = ['This', 'IS', 'Animation', 'For', 'DD1'];
$(".dd1").select2();
});
CSS
#keyframes openDD {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes closeDD {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.dd2.ng-enter {
animation: openDD 2s;
}
.dd2.ng-leave {
animation: closeDD 1s;
}

Related

CSS Animation with Vue.js

I'm learning Vue Js.
Actualy I'm making a chat example application with SCSS and Vue Js.
On my project I've decided to set some CSS animations to the messages box.
Here is the snippet of the animation code:
SCSS:
.push {
...
animation-duration: 0.3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
&.received {
...
animation-name: inFromLeft;
}
&.sent {
...
animation-name: inFromRight;
}
}
#keyframes inFromRight {
0% {
right: -100%;
}
100% {
right: 0;
}
}
#keyframes inFromLeft {
0% {
left: -100%;
}
100% {
left: 0;
}
}
HTML / VUE:
<div id="chat">
<div v-for="(message, index) in messages" :key="index" class="push" :class="type(message)">
...
</div>
</div>
All the message are stored in the users object in array(s) format. (with vue data).
The problem is that some messages use the animation and some messages not.
I think this problem is related to vue and his method to load array(s).
Here is a dimostration of the final result:
https://www.youtube.com/watch?v=EYsBk4HboD8
Can someone help me to understand the problem and how to fix?
(I prefer use CSS animations and avoid to use the vue transition at the moment).
Thank you!
The problem is in :key="index", changing the key to be unique per-message. should fix the issue
Explanation: Vue tracks every unique element in the loop through keys to avoid removing and re-rendering elements unless they really got changed, setting messages keys as their index makes Vue think that no new element was added if element in index 3 was removed and a new element was added with the same key
read more about this here https://v2.vuejs.org/v2/guide/list.html#Array-Change-Detection

angular ngShow with animate.css

I want to animate the showing and hiding of an element using animate.css and angular.
I have read this SO question and the angular documentation for ngShow and ngAnimate but still cannot get it to work.
I have tried the following setup on plunker, but it doesn't work.
app.js
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.show = true;
});
index.html
<body ng-controller="MainCtrl">
<p>Show: {{show}}</p>
<div class="show" ng-click="show = !show" ng-show="show === true">Show is true</div>
<div class="hide" ng-click="show = !show" ng-show="show === false">Show is false</div>
</body>
style.css
.show.ng-hide-add {
animation: fadeOut 5s linear;
}
When clicking on "show is true" (and therefor hiding it) I see it wait for 5 second before hiding, so there is something happening, but it doesn't fade out.
I can make it work if I add this to the css:
.show.ng-hide-add {
opacity: 1.0;
display: block !important;
transition: opacity 1s;
}
.show.ng-hide-add-active {
opacity: 0;
}
However, I don't want to do it this way. I want to use animate.css's keyframes (I think that's the correct term, my css lingo isn't brilliant) such as fadeIn, fadeOut etc..
plunker to show what I am seeing.
What am I doing wrong? How can I use animate.css's keyframe animations with angular's ngAnimate?
You have to use .ng-hide class, as it's the class that is assigned once the condition in ng-show is false, or in ng-hide is true.
According to that you can edit your code like this:
.show.ng-hide,
.hide.ng-hide{
opacity: 0;
transition: all linear 0.5s;
}
.show,
.hide{
transition: all linear 0.5s;
opacity:1;
}
<p>Show: {{show}}</p>
<div class="show" ng-click="show = !show" ng-show="show">Show</div>
<div class="hide" ng-click="show = !show" ng-hide="show">Hide</div>
-
EDIT:
In case you want to use the animate.css classes, for example .fadeIn and .fadeOut you have to assign the corresponding keyframes inside your css.
So you have to use the following CSS:
.show.ng-hide,
.hide.ng-hide{
animation-name:fadeOut;
animation-duration: .5s;
}
.show{
animation-name:fadeIn;
animation-duration: .5s;
}
IMPORTANT NOTE:
In order to make it work correctly in the plunker I have not used the 3.2.0 version suggested by the plunker external library finder, but I manually linked the 3.5.1 version adding the following code in the html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" />
-
Working Plunker with full code
Change your code to this
<div ng-show="show">
<div class="show" ng-click="show = !show">Show</div>
</div>
<div ng-show="!show">
<div class="hide" ng-click="show = !show" >Hide</div>
</div>
.show.ng-hide{
opacity: 0;
transition: all linear 0.5s;
}
.show{
transition: all linear 0.5s;
opacity:1;
}

angularJs animate ng-repeat entrance

I've got this simple list of countries and I'm trying to get them to animate on entrance but I can't seem to find what's stopping this from working?
<ul>
<li ng-repeat="country in countries" type="country" class="slide">
<a ui-sref="state5"> {{country.name}}</a>
</li>
</ul>
css file:
.slide.ng-enter {
transition:0.5s linear all;
transform:translateY(-100px);
}
.slide.ng-enter.ng-enter-active {
transform:translateY(0);
}
animate.js file:
countryApp.animation('.slide', [
function() {
return {
enter: function(element, doneFn) {
jQuery(element).slideIn(1000, doneFn);
}
}
}]
Can someone perhaps clarify this for me? Thanks
your css style only working for firefox. if you want chrome use -webkit prefix
.slide.ng-enter {
transition:0.5s linear all;
transform:translateY(-100px);
-webkit-transition:0.5s linear all;
-webkit-transform:translateY(-100px);
}
.slide.ng-enter.ng-enter-active {
transform:translateY(0);
-webkit-transform:translateY(0);
}

AngularJS can we trigger the move animation event manually

In the ng-repeat section there are animations event handler for enter, leave and move. But the move event is only triggered when we resort or filter the array used for ng-repeat. What if I only change the attribute values of my objects. Then no event is triggered at all. Is there a way to trigger the event manually after I have changed the object attribute?
Here is a fiddle: http://jsfiddle.net/U3pVM/15002/
Html:
<ul>
<li ng-repeat="d in data">
<div class="lala" style="width: {{d.a}}px">foo</div>
</li>
</ul>
JS:
function TodoCtrl($scope) {
$scope.data = [{a:100}, {a:120}];
// I would like to animate the value changes
$scope.change = function() {
$scope.data[0].a = 110;
$scope.data[1].a = 90;
}
}
your class definitions are wrong.
.lala,
.lala.ng-enter,
.lala.ng-move,
.lala.ng-leave {
background-color: grey;
-webkit-transition:all 1s linear;
-moz-transition:1s linear all;
-o-transition:1s linear all;
transition:all 1s linear;
}
See the working fiddle here.
just add transition to the main class
.lala{
transition:0.5s;
background-color:grey;
}
https://jsfiddle.net/U3pVM/15006/

ng-animate not working as expected

I am trying to do a simple fade in of an element when a boolean variable is set to true. It was working fine earlier, until I changed my AngularJS version to 1.2.15. Am I doing something incorrectly?
Here is a sample JSFiddle.
<div ng-app="myApp" ng-controller="myController">
{{ready}}
<div ng-show="ready" ng-animate="{show:'animate-show'}">hello</div>
</div>
$scope.ready = false;
function displayBox() {
$scope.ready = true;
$scope.$apply();
}
setTimeout(displayBox, 1000);
Animation syntax changed in Angular 1.2.x. Now you have to use ngAnimate module as dependency and change the way you apply animation with CSS. Your HTML becomes:
<div class="animate-show" ng-show="ready">hello</div>
And in your situation you only need this simple CSS:
.animate-show {
opacity: 1;
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.animate-show.ng-hide {
opacity: 0;
}
Demo: http://plnkr.co/edit/nHZ6P6evV2Ee4NtIeMZY?p=preview

Categories