We Keep Coding

Transition component Vuejs - Not working - Differences between inner and outer

EDIT Simplify the question
http://jsfiddle.net/bf830qoq/
Why the transition in that minimalist example does not work? (It mimics the real case in my code)
Former post
I would like to apply a transition on a custom component in VueJs 2, depending on v-if condition.
I tried to put the transition inner the component loading :
Parent component
<loading v-if="shared.loading"></loading>
Loading.vue
<template>
<transition name="slide-fade">
<div class="loading-container">
<div class="container-no-text">
<div class="title-no">Loading</div>
</div>
</div>
</transition>
</template>
<script>
import Store from '../store.js'
export default{
data () {
return {
shared: Store.state,
}
},
}
</script>
<style>
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for <2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
</style>
It simply does not work, the login disappears without any animation.
I tried to mimic the situation with JSFiddle :
Outer transition : http://jsfiddle.net/0v0wyLv0/ WORKING
Inner transition : http://jsfiddle.net/jpcays2b/ NOT WORKING
Here are the questions:
Why the second JSFiddle does not work (the inner one)?
Why on my code the "outer" does not work?
How can I make the loading component disappear smoothly?
Example which is working
https://jsfiddle.net/er3tjyh0/
Thank you

As par the implementation of transition in vue.js, transition wrapper component allows you to add entering/leaving transitions for any element or component in the following contexts:
Conditional rendering (using v-if)
Conditional display (using v-show)
Dynamic components
Component root nodes
From the docs:
When an element wrapped in a transition component is inserted or removed, this is what happens:
Vue will automatically sniff whether the target element has CSS transitions or animations applied. If it does, CSS transition classes will be added/removed at appropriate timings.
If the transition component provided JavaScript hooks, these hooks will be called at appropriate timings.
If no CSS transitions/animations are detected and no JavaScript hooks are provided, the DOM operations for insertion and/or removal will be executed immediately on next frame (Note: this is a browser animation frame, different from Vue’s concept of nextTick).
That's why transition will only work, when it is wrapping the v-if and not when it is inside, thats how it is implemented.

Animation transitions behave differently for ng-hide-remove and ng-hide-add

I am trying to animate a <div> to slide-in/out from the left on a button click. I am using the angular framework and ng-showto control the <div> display/visibility, and adding transitions to the ng-hide set of styles.
I have successfully managed to have the div slide in from the left, however I can not get it to slide out (it simply dissappears after the specified delay). I have tried modifying several examples online to get the behavior I am after to no avail.
JSFiddle for anyone that wants to have a look
https://jsfiddle.net/mquinlan/0wcrcwxe/5/

You got that almost right except for removing the left:0 in the selectors for .animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove.ng-hide-remove-active.
.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
-moz-transition: all ease 0.5s;
transition: all ease 0.5s;
}
Updated Fiddle: https://jsfiddle.net/vsj62g5r/

Angular JS and Animate.css: fade animation is janky

I have a dialog in which I'd like to display one of two things depending on the state of a variable. So, I hooked up 2 versions of a form with ng-if.
When you click "delete" button on first state, it toggles to the second state.
I wanted to make it less abrupt, so I tried adding some css:
[ng-if].ng-enter {
animation: fadeIn .5s;
}
[ng-if].ng-leave {
animation: fadeOut .5s;
}
These animations come from the bower package "animate css":
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
animation-name: fadeIn;
}
However, as you can see in my animated GIF below, what happens is that for a second BOTH forms appear, making the dialog taller, then one fades out.
Is there no way to do a simple fadein/fadeout as in jQuery? I used to do this all the time with it, but trying to get nice UI animation in Angular is eluding me.

I had a similar problem with an Angular app and animations. I ended up having to use jquery - I wish I had a better answer - but it turned out beautifully. One note, though, I had to wrap any jquery I used in a noConflict() and use body on click plus the element because it doesn't exist yet in the DOM:
$.noConflict();jQuery( document ).ready(function( $ ) {
$('body').on('click', "#toggler", function(){
$('#div_to_show').slideDown();
});
});
I realize this a tangential answer and not an elegant solution but it worked for me to get it out the door under a tight deadline.

A clean solution is to change the state you use to check which form is to display when the animation ng-leave ends.
You can use a second variable to set the ng-leave class in the form that will be hidden.
I can't post you some code because i don't know your js and html.

ng-animate not triggering animations

On my angular js site I have angular-animate lodaed and deployed (in the inspector I see angular-animate.js in the js folders so I know its loading. What I want to do is have my header animate on page load so I have added the following to my project
template.html
<header id="header" ng-animate=" 'animate' ">
</header>
style.css
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
The issue being is no animation occurs when I click from the home link and load "template.html" Is there something I am missing here??

As per the Angular documentation:
The directives that support animation automatically are: ngRepeat,
ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass. Custom
directives can take advantage of animation by using the $animate
service.
You need to use one of these directives in your header tag.

Ng animate in angular js

I need to show the div with animated effect .
<div class="appdrawer pull-right tab-{{ showDetails }}" data-ng-click="showDetails = !showDetails; showDetails1 = false; showDetails2 = false;" >Apps</div>
<section id="workbench-apps" data-ng-class="{ 'hidden': ! showDetails }" data-ng-animate=" 'animate' ">
<div class="rowfluid">
Apps
<div class="applist" data-ng-repeat="applist in applists">{{ name }}</div>
</div>
</section>
css
.animate,.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
i tried with above code,but not working ,pls suggest a angular way

As Jon7 mentioned, you can't use ngAnimate with ngClass in Angular 1.1.5. You can use ng-Show though.
Also, in Angular 1.2 ngClass based animations will work. Year of Moo has a great writeup with samples: http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html

ngAnimate is used (at least in 1.1.5) to add animation to an existing directive. If you check out the ngAnimate documentation, you'll notice a list of supported directives. Use it in conjunction with one of these directives to get an animation.
Also, you're specifying that you want to use an animation called "animate." You'll actually need to define an animation with that name in the CSS.