We Keep Coding

Jquery mouseover that rearranges classes within a div then resets with mouseleave

EDIT -
The correct solution can be found here. Going off of Taplar's suggestion. I made two additional classes that duplicate the active and inactive but with !important property.
Original Post
I am new to the coding world and am going crazy trying to figure this out. I found and am trying to modify this code posted at Codepen.
On load, I would like to have .premium display as 'active' and have .standard and .platinum display as 'inactive'. Then on mouseover(), rearrange the classes so that what is being moused-over would have the 'active' class and the others 'inactive'. Lastly, when mouseleave() is triggered reset each div to the original default active and inactive.
HTML
<section class="pen">
<div class="plans">
<div class="plandis standard inactive"></div>
<div class="plandis premium active"></div>
<div class="plandis platinum inactive"></div>
</div>
</section>
CSS
.pen {
max-width: 635px;
width: 100%;
margin: 50px auto 0;
opacity: 0;
position: relative;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-animation: 1s appear 1 forwards;
-moz-animation: 1s appear 1 forwards;
-o-animation: 1s appear 1 forwards;
animation: 1s appear 1 forwards;
}
.plans {
max-width: 635px;
width: 100%;
height: 400px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis {
width: 202px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
height: inherit;
margin: 0 7px 0 0;
display: inline-block;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.plandis.active {
width: 282px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis.inactive {
width: 162px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 0.4;
}
.plandis.premium {
background-color:red;
background-size: cover;
}
.plandis.standard {
background-color:blue;
background-size: cover;
}
.plandis.platinum {
background-color:green;
background-size: cover;
}
.plandis:last-of-type {
margin: 0;
}
#media all and (min-width: 900px) {
.pen {
max-width: 890px;
}
.plandis {
width: 286px;
}
.plandis.inactive {
width: 246px;
}
.plandis.active {
width: 366px;
}
.plans {
max-width: 890px;
height: 600px;
}
}
#media all and (max-width: 660px) {
.pen {
max-width: 335px;
}
.plandis {
width: 101px;
}
.plandis.inactive {
width: 61px;
}
.plandis.active {
width: 181px;
}
.plans {
max-width: 335px;
}
}
#-webkit-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
JS
$('.plandis').each(function() {
$(this).mouseover(function() {
$(this).addClass('active');
$('.plans').children('.plandis').not('.active').addClass('inactive');
});
$(this).mouseleave(function() {
$(this).removeClass('active');
$('.plans').children('.plandis').not('.active').removeClass('inactive');
});
});
I have tried to manipulate the code multiple times but to no avail. So hopefully someone will be able to help me out!

I went about this suggested solution slightly different. Rather than toggling the active and inactive classes, I added a third class of "ignore".
.plandis.active:not(.ignore),
.plandis.inactive:hover {
}
The css rule for active was changed to also check that the element does not have the ignore class. Also, the element should be active if it is inactive, but is hovered on.
At that point, we just have to add the ignore class to any active element that we are not currently hovering over.
var $allPlandis = $('.plandis')
.on('mouseenter', function() {
$allPlandis.not(this).filter('.active').addClass('ignore');
})
.on('mouseleave', function() {
$allPlandis.filter('.ignore').removeClass('ignore');
});
.pen {
max-width: 635px;
width: 100%;
margin: 50px auto 0;
opacity: 0;
position: relative;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-animation: 1s appear 1 forwards;
-moz-animation: 1s appear 1 forwards;
-o-animation: 1s appear 1 forwards;
animation: 1s appear 1 forwards;
}
.plans {
max-width: 635px;
width: 100%;
height: 400px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis {
width: 202px;
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
height: inherit;
margin: 0 7px 0 0;
display: inline-block;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.plandis.active:not(.ignore),
.plandis.inactive:hover {
width: 282px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis.inactive {
width: 162px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 0.4;
}
.plandis.premium {
background-color: red;
background-size: cover;
}
.plandis.standard {
background-color: blue;
background-size: cover;
}
.plandis.platinum {
background-color: green;
background-size: cover;
}
.plandis:last-of-type {
margin: 0;
}
#media all and (min-width: 900px) {
.pen {
max-width: 890px;
}
.plandis {
width: 286px;
}
.plandis.inactive {
width: 246px;
}
.plandis.active {
width: 366px;
}
.plans {
max-width: 890px;
height: 600px;
}
}
#media all and (max-width: 660px) {
.pen {
max-width: 335px;
}
.plandis {
width: 101px;
}
.plandis.inactive {
width: 61px;
}
.plandis.active {
width: 181px;
}
.plans {
max-width: 335px;
}
}
#-webkit-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="pen">
<div class="plans">
<div class="plandis standard inactive"></div>
<div class="plandis premium active"></div>
<div class="plandis platinum inactive"></div>
</div>
</section>
The snippet runner here appears to work, however there is some display oddity with the CSS as it appears making the first one active and the second one inactive pushes the third one down on the page, rather than staying on the same line.

The correct solution can be found here. Going off of Taplar's suggestion. I made two additional classes that duplicate the active and inactive classes but with !important property.
HTML
$('.plandis').each(function() {
$(this).mouseover(function() {
$(this).addClass('activejq');
$('.plans').children('.plandis').not('.activejq').addClass('inactivejq');
});
$(this).mouseleave(function() {
$(this).removeClass('activejq');
$('.plans').children('.plandis').not('.activejq').removeClass('inactivejq');
});
});
body {
background: #000000;
}
.pen {
width: 100%;
margin: 50px auto 0;
opacity: 0;
position: relative;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-animation: 1s appear 1 forwards;
-moz-animation: 1s appear 1 forwards;
-o-animation: 1s appear 1 forwards;
animation: 1s appear 1 forwards;
}
.plans {
max-width: 635px;
width: 100%;
height: 400px;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.plandis {
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
height: inherit;
margin: 0 7px 0 0;
display: inline-block;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.active {
width: 282px;
opacity: 1;
}
.inactive {
width: 162px;
opacity: 0.4;
}
.inactivejq {
width: 246px !important;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 0.4;
}
.activejq {
width: 366px !important;
-webkit-transition: all 0.25s ease-in-out;
-moz-transition: all 0.25s ease-in-out;
-ms-transition: all 0.25s ease-in-out;
-o-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
opacity: 1;
}
.plandis.premium {
background-color: red;
background-size: cover;
}
.plandis.standard {
background-color: blue;
background-size: cover;
}
.plandis.platinum {
background-color: green;
background-size: cover;
}
.plandis:last-of-type {
margin: 0;
}
#media all and (min-width: 900px) {
.pen {
max-width: 890px;
}
.plandis {
width: 286px;
}
.inactive {
width: 246px;
}
.active {
width: 366px;
}
.plans {
max-width: 890px;
height: 600px;
}
}
#media all and (max-width: 660px) {
.pen {
max-width: 335px;
}
.plandis {
width: 101px;
}
.inactive {
width: 61px;
}
.active {
width: 181px;
}
.inactivejq {
width: 61px !important;
}
.activejq {
width: 181px !important;
}
.plans {
max-width: 335px;
}
}
#-webkit-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-moz-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-o-keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#keyframes appear {
15% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<section class="pen">
<div class="plans">
<div class="plandis standard inactive"></div>
<div class="plandis premium active"></div>
<div class="plandis platinum inactive"></div>
</div>
</section>
</body>
</html>

How to remove scrollbar which is shown on using transform scale?

I am trying to develop an Image slider. I want the images to zoom in until the next image takeover occurs. I am currently using the transform scale property. It is overflowing the width and causes a scrollbar to be displayed. How can this scrollbar be removed?
HTML:
<div id="pn-head">
</div>
JS:
var i = 1;
function tSlide(){
if(i<=5){
jQuery('#pyn-head').attr('class','pn-head head-bg'+i);
}
i = i+1;
if(i==6){
i=1;
}
}
tSlide();
setInterval(tSlide , 5000);
CSS:
.pn-head{
height: 700px;
background-size: cover !important;
background-repeat: no-repeat !important;
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
-webkit-transition: transform 2s ease-out 1s;
-moz-transition: transform 2s ease-out 1s;
-o-transition: transform 2s ease-out 1s;
transition: transform 2s ease-out 1s;
}
.head-bg1{
background: url('../img/b1.png');
transform: scale(1.1);
}
.head-bg2{
background: url('../img/b2.png');
transform: scale(1.2);
}
.head-bg3{
background: url('../img/b3.png');
transform: scale(1.3);
}
.head-bg4{
background: url('../img/b4.png');
transform: scale(1.4);
}
.head-bg5{
background: url('../img/b5.png');
transform: scale(1.5);
}

Add this to remove all scrollbars:
<style type="text/css">
body {
overflow:hidden;
}
</style>

Transition on :hover:before not working properly

Basically what I'm trying to do is have a transition with transform applied on the :hover:before element so that when you hover with your mouse over ava.png the :before element smoothly appears instead of instantly.
I've tried adding the transition code to the :hover:after class (as seen in the code below) and I tried one of the solutions I found on StackOverflow, changing :hover to :before and adding the content + transition to that class. Needless to say none of my attempts worked or I wouldn't be here right now. (:D)
If anyone could take the time to help me out that'd be highly appreciated, thanks!
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:hover:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>

To animate transition you need a to have some kind of a change in the elements properties. This means that the element should be part of the page, displayed (ie no display: none) and visible (no visibility: hidden), but somehow invisible / transparent (opacity: 0 for example).
In your case, you don't create the :before element unless you want to display it. To solve that render the :before with scale(0), and on over change it to scale(1):
#header .inner {
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transition-delay: 0.25s;
-webkit-transition-delay: 0.25s;
-ms-transition-delay: 0.25s;
transition-delay: 0.25s;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
opacity: 1;
position: relative;
z-index: 1;
}
#slide1 {
position: relative;
margin-left: 147px;
margin-top: 0px;
z-index: 100;
width: 98px;
height: 92px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050955/ava.png");
}
#slide1:hover {
position: relative;
}
#slide1:before {
content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
display: block;
z-index: -1;
position: absolute;
margin-left: -150px;
margin-top: -50px;
-moz-transition: -moz-transform 1.5s ease, opacity 2s ease;
-webkit-transition: -webkit-transform 1.5s ease, opacity 2s ease;
-ms-transition: -ms-transform 1.5s ease, opacity 2s ease;
transition: transform 1.5s ease, opacity 2s ease;
-moz-transform: scale(0);
-webkit-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
#slide1:hover:before {
-moz-transform: scale(1);
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
#slide2 {
position: relative;
margin-left: 0px;
margin-top: 0px;
z-index: 100;
width: 140px;
height: 160px;
display: inline-block;
background-image: url("https://www.upload.ee/image/6050954/arrow.png");
}
<div class="inner">
<a id="slide1" href="/insider-informatie/over-mij.html"></a>
<div id="slide2"></div>
<h1>Header 1</h1>
<p>My text</p>
</div>

css3 transition is not smooth in safari

I'm rebuilding someone's else CSS3 transition to make it work across Safari, Chrome, and Firefox. In their version (mouse over the package images), the transition works well in Safari, but not in the other two: The elements get stuck in the "up" position. In my version, the transition runs smoothly in FF and Chrome, but is jerky in Safari (plus it's not rotating). Any ideas? My CSS is below.
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, transform .25s ease;
-moz-transition: margin .1s ease, transform .25s ease;
-o-transition: margin .1s ease, transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, transform .25s ease-out;
-moz-transition: margin .1s ease, transform .25s ease-out;
-o-transition: margin .1s ease, transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}

While I agree that jQuery is not necessary for this problem, the real issue appears to be an inconsistent use of browser prefixes.
You needed to add prefixes for transform: rotate() on both .package-down and .package-up.
Also this:
-webkit-transition: margin .1s ease, transform .25s ease-out;
Should be this:
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
And it would be a similar adjustment for all the other prefixed transition properties.
See Codepen
$(function() {
$('.package-down').hover(function() {
$('.package-down').toggleClass('package-up');
});
});
img {
margin: 0;
max-width: 100%;
}
.main-packages-wrapper {
position: relative;
width: 80%;
min-height: 575px;
display: block;
padding-top: 80px;
z-index: 1; }
.package.original {
margin-right: -15px;
margin-left: -15px;
z-index: 2; }
.package.original img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.package-down {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: 0 0 0 0;
-webkit-transform: rotate(0deg) ;
-moz-transform: rotate(0deg) ;
-o-transform: rotate(0deg) ;
transform: rotate(0deg) ;
-webkit-transition: margin .1s ease, -webkit-transform .25s ease;
-moz-transition: margin .1s ease, -moz-transform .25s ease;
-o-transition: margin .1s ease, -o-transform .25s ease;
transition: margin .1s ease, transform .25s ease;
}
.package-up {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.333%;
margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-transition: margin .1s ease, -webkit-transform .25s ease-out;
-moz-transition: margin .1s ease, -moz-transform .25s ease-out;
-o-transition: margin .1s ease, -o-transform .25s ease-out;
transition: margin .1s ease, transform .25s ease-out;
}
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<body>
<div class="primary-content">
<section class="main-packages-wrapper">
<div class="package-down multigrain">
<img src="http://www.batterworld.com/wp-content/themes/batterworld/images/package_multigrain.png">
</div>
</section>
</div><!--END PRIMARY CONTENT-->

I'm actually astonished that your jQuery hover function does work at all, because what you'd actually need is mouseenter -> addClass and mouseleave -> removeClass, but it might be me not exactly being aware of how jQuery's .hover() works.
Nonetheless, there is absolutely no need for jQuery or even Javascript to change styles on mouseover. You have the pseudo-selector :hover for exactly this purpose: Put the styles your want to transition to into
.package-down:hover { /* properties to transition to */ }
Next, do not repeat styles that the element already has and that do not change.
Last, if your problem is that not all property transition are taking an equal amount of time, don't specify so:
transition: margin .1s ease, transform .25s ease-out;
This will make the margin changes take 0.1s, but the rotation to take 0.25s.
Please describe more concisely what your transition is to look/perform like.
http://codepen.io/anon/pen/aOJmKe
Also, please be aware that you are not doing a css animation here, but a css transition. Read more about the differences here:
CSS: Animation vs. Transition

Yup, the javascript was definitely extraneous. All that was needed were CSS transitions applied to the :hover state of the elements. I did end up repeating some transition code, because that enabled the transitions to run in reverse when the cursor leaves the hovered element. Thanks! Finished codepen here.
.package.original img {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
}
.package {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.33%;
z-index: 1;
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
transition: margin .15s ease-out;
}
.package:hover {
display: block;
position: relative;
height: 100%;
float: left;
width: 33.33%;
z-index: 1;
margin: -50px 0 0 0;
-webkit-transform: rotate(-2deg);
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
transition: margin .15s ease-out;
}
.original:hover{
margin-left: -30px;
-webkit-transition: margin .15s ease-out;
-moz-transition: margin .15s ease-out;
-o-transition: margin .15s ease-out;
width: 33.33%;
z-index: 2;
}

Delaying child animations in a view

I'm new to AngularJS but before asking this question i've searched and searched for an answer on how to do this the Angular Way but have come up short.
What i'm looking to do:
Have child animations of a view trigger [delay] until after the view[parent] has animated in or has slightly animated in/out.
I currently have everything set up with ui-view and have the pages animating in and out without any problems. But, if I try to delay a child animation or have its animation longer than the duration of the parent animation then it just jumps instead of animating.
From what I can tell, this is because ng-enter and ng-leave get removed after the parent is done animating, as designed.
I have created a Plunker to show this: http://plnkr.co/edit/5iOb1j0l8lFaMZfrKIFh?p=preview
The animations are being done via CSS:
.ui-animate {
$enLvDur: .8s;
$delay: 1s;
&.ng-enter,
&.ng-leave {
position:absolute;
top: 100px; right: 0;
bottom: 0; left: 0;
transform: -webkit-translateX(0px);
transform: -ms-translateX(0px);
transform: translateX(0px);
}
&.ng-enter {
z-index: 2;
transform: -webkit-translateX(100%);
transform: -ms-translateX(100%);
transform: translateX(100%);
transition: -webkit-transform $enLvDur ease-in-out 0s;
transition: -ms-transform $enLvDur ease-in-out 0s;
transition: transform $enLvDur ease-in-out 0s;
.child-delay {
opacity: 0;
transition: opacity $enLvDur ease-in-out $delay;
}
}
&.ng-enter-active {
transform: -webkit-translateX(0px);
transform: -ms-translateX(0px);
transform: translateX(0px);
.child-delay {
opacity: 1;
}
}
&.ng-leave {
z-index: 1;
transform: -webkit-translateX(0px);
transform: -ms-translateX(0px);
transform: translateX(0px);
transition: -webkit-transform $enLvDur ease-in-out 0s;
transition: -ms-transform $enLvDur ease-in-out 0s;
transition: transform $enLvDur ease-in-out 0s;
}
&.ng-leave-active {
transform: -webkit-translateX(100%);
transform: -ms-translateX(100%);
transform: translateX(100%);
}
}
If you click between the pages you'll see the yellow box doesn't animate because it has a 1s delay on it while the parent has a .8s animation duration. (you can change this in the style.scss file)
So, how would I go about having a views children animate, no matter the delay or duration when a view is brought in and removed?