Develop Reference

Angular 14 Class binding transition is not triggering

I'm using class binding on an element which then should have its scaleY() change from 1 to 0. When I tried the transition with a :hover selector it worked perfectly but when I actually try it with class binding it just pops off without the desired transition.
I looked online and most of the already answered question were about the CSS that was incorrect such as this example (angular ng-class appending classes does not trigger css3 transition).
Here's the code :
filledPortionis an array containing 10 booleans if they're set to true then it adds the filled class, which it does ! I'm gonna repeat myself but Angular does add/remove the class as it should my only problem is that it skips my transition (which is working when I tried using it with an :hover selector)
component.html
<div class="bar" [class.end]="typeEnd">
<span *ngFor="let portion of filledPortion; let i = index" class="portion" [class.filled]="portion"></span>
</div>
component.scss
.bar {
.portion {
position: relative;
width: 2rem;
height: 1.5rem;
clip-path: polygon(100% 0, 0 0, 50% 100%);
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-origin: bottom;
transform: scaleY(0);
background-color: var(--red);
transition: transform .250s cubic-bezier(0.4, 0.0, 0.2, 1);
z-index: 1;
}
&.filled::before {
transform: scaleY(1);
}
}
}
.end {
.portion {
&::before , &::after {
background-color: #fff;
}
}
}

jQuery animation after removing elements

I have the following HTML and CSS:
<div id="categories">
<h3 id="sports">Sports</h3>
<h3 id="videogames">Video Games</h3>
<h3 id="music">Music</h3>
<h3 id="web">Web</h3>
</div>
#categories {
left: 50%;
top: 50%;
position: absolute;
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
#categories > h3 {
display: inline;
}
The h3 elements are displaying inline and centered. I have the following code in jQuery that when you click an h3 element, the other elements fade out. It works well to remove the elements, but once they disappear, the selected element just suddenly flashes into the center (which is where I want it) but is there a way to animate this? Make it a smoother transition?
$("#categories h3").click(function(){
if(this.id == "sports"){
$("#videogames").fadeOut(500);
$("#music").fadeOut(500);
$("#web").fadeOut(500);
}
})

Use transition, much better.
$("#categories h3").click(function(){
if(this.id == "sports"){
$("#videogames, #music, #web").css({opacity: 0});
}
});
#categories {
left: 50%;
top: 50%;
position: absolute;
-webkit-transform: translate3d(-50%, -50%, 0);
-moz-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
#categories > h3 {
display: inline;
transition: opacity .3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="categories">
<h3 id="sports">Sports</h3>
<h3 id="videogames">Video Games</h3>
<h3 id="music">Music</h3>
<h3 id="web">Web</h3>
</div>

May be you can use this. correct me if i am wrongly understood.
if(this.id == "sports"){
$("#videogames").fadeOut(500);
$("#music").fadeOut(500);
$("#web").fadeOut(500);
$("#sports").fadeOut(500);
$("#sports").fadeIn(500);
}

To answer your question about smoothly transitioning the selected element to the center try the below code.
Your fundamental problem is that "The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page." And so the remaining selected element jumps to the center. And you cannot transition to display: none. So you need to find a property you can animate, like "left" which I have used here.
[As an aside there is some extra code there because I was testing the ability to animate flex "order" but it doesn't work at this time on Edge, and untested on other browsers. You do not need the order properties.]
Hope this helps.
$("#categories h3").click( function() {
var thisID = this.id;
$.each( $("#categories h3"), function (index, val) {
if (thisID == val.id) {
var containerWidth = $("#categories").width();
var thisWidth = val.getBoundingClientRect().width;
var thisComputedLeft = val.getBoundingClientRect().left;
var adjustLeft = (containerWidth / 2) - thisComputedLeft - (thisWidth / 2);
// to center the clicked element
$(this).css({ left: adjustLeft });
}
else $(val).css({opacity: 0});
});
});
#categories {
position: relative;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row nowrap;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
justify-content: space-around;
align-content: center;
width: 100%;
height: 100%;
//margin: 0 auto;
}
#categories > h3 {
cursor: pointer;
position: relative;
left: 0;
width: auto;
transition: all 0.5s ease, opacity 0.3s;
// transition: opacity 0.3s;
}
#sports { order: 1; }
#videogames { order: 2; }
#music { order: 3; }
#web { order: 4; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="categories">
<h3 id="sports">Sports</h3>
<h3 id="videogames">Video Games</h3>
<h3 id="music">Music</h3>
<h3 id="web">Web</h3>
</div>

Try the following:
$("#categories h3").on('click', function(){
if(this.id == "sports"){
$("#videogames").fadeOut(500, function(){
$("#music").fadeOut(400, function(){
$("#web").fadeOut(300, function(){
$("#sports").fadeIn(400);
});
});
});
}
});
The callback function is called once the first animation is complete. You can nest the functions for a sequence animation.
Update:
Here are better examples for chaining animations: Chaining jQuery animations that affect different elements

Fix nav bar on top on scroll down

I tried to achieve something similar to here
but for me its not fixing at top on scrolling down.Someone please provide any example or resources to achieve this feature.
.features-switcher.fixed:after,
{
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: fixed;
z-index: 101;
width: 100%;
height: 65px;
top: 0;
left: 0;
opacity: 1
}
For my nav-bar div class features-switcher:
$(window).scroll(function () {
console.log("scrolled down");
console.log($(window).scrollTop());
if ($(window).scrollTop() > 150) {
$('features-switcher').css('top', 0);
}
}
);

You are missing a .
$('features-switcher').css('top', 0);
Should be...
$('.features-switcher').css('top', 0);

AngularJS transitions with ui-view, wrong behaviour when changing direction

I'm trying to apply a transition on my content inside a ui-view. The transition is a simple slide effect which slides from right to left to go deeper in the app, and from left to right when going back.
I found several people with the same problem, then I found this thread Two different animations for route changes which gives a solution, but it was not working for me.
html
<div ng-app="exampleApp" id="app">
<a ui-sref="state1">State 1</a>
<a ui-sref="state2">State 2</a>
<a ui-sref="state3">State 3</a>
<div class="viewWrap" ng-controller="viewCtrl" ng-class="direction">
<div class="container" ui-view ></div>
</div>
</div>
js
var app = angular.module('exampleApp', ['ui.router.compat', 'ngAnimate']);
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider.state('state1', {
template: '<div id="state1"><p>Slide 1</p></div>',
url: '/state1',
depth: 1
});
$stateProvider.state('state2', {
template: '<div id="state2"><p>Slide 2</p></div>',
url: '/state2',
depth: 2
});
$stateProvider.state('state3', {
template: '<div id="state3"><p>Slide 3</p></div>',
url: '/state3',
depth: 3
});
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
})
.controller('viewCtrl', function ($scope) {
$scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
if (fromState.depth > toState.depth) {
$scope.direction = 'right';
} else {
$scope.direction = 'left';
}
});
});
css
#state1 {
width: 100%;
height: 400px;
background: red;
}
#state2 {
width: 100%;
height: 400px;
background: blue;
}
#state3 {
width: 100%;
height: 400px;
background: green;
}
.container {
position: absolute;
width: 100%;
}
.viewWrap {
overflow: hidden;
}
.container.ng-enter,
.container.ng-leave {
-webkit-transition: 0.5s ease all;
transition: 0.5s ease all;
}
.left .container.ng-enter {
-webkit-transform: translate3d(100%, 0, 0);
}
.left .container.ng-leave.ng-leave-active {
-webkit-transform: translate3d(-100%, 0, 0);
}
.right .container.ng-enter {
-webkit-transform: translate3d(-100%, 0, 0);
}
.right .container.ng-leave.ng-leave-active {
-webkit-transform: translate3d(100%, 0, 0);
}
.container.ng-leave,
.container.ng-enter.ng-enter-active {
-webkit-transform: translate3d(0, 0, 0);
}
Then I saw that it wasn't ui.router that was used as a dependency, but ui.router.compat.
So I tried to use it instead of ui.router, and it seems to work.
ui.router (not working) http://codepen.io/anon/pen/LVWpXM
ui.router.compat (working) http://codepen.io/anon/pen/qdrOoM
But according to the doc https://github.com/angular-ui/ui-router/wiki/Backwards-Compatibility, ui.router.compat is not supposed to do that at all.
Any ideas to make this work with ui.router ?

Highlight element using jQuery with scaled transparent element

I'm trying to create the following effect for any element using only jQuery/plugins:
In particular it should use a transform for the scale rather than width and height animation and be usable on any DOM element.
Is there a plugin available for jQuery which will achieve this effect? It should be quite simple: duplicate the dom object with clone(), reposition the clone over the original absolutely then animate a scale transform and opacity on the new element. However, I suspect it's not as simple as this.
Any ideas?

You don't need jQuery to accomplish that animation. You can use CSS3 animations and transform properties. Check out the following example I created:
http://jsbin.com/purik/1/
HTML:
<div class="logos">
<div class="logo"></div>
<div class="logo animated"></div>
</div>
CSS:
.logos {
position: relative;
}
.logo {
width: 100px;
height: 70px;
background: #CC0000 url(http://www.w3schools.com/images/w3logo.png) 50% 50% no-repeat;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.logo.animated {
position: absolute;
left: 0;
top: 0;
animation: scale-fadeout 2s infinite;
-webkit-animation: scale-fadeout 2s infinite;
}
#keyframes scale-fadeout {
0% {
transform: scale(1);
opacity: 1;
}
5% {
opacity: 1;
transform: scale(1.05);
}
100% {
opacity: 0;
transform: scale(1.35);
}
}
#-webkit-keyframes scale-fadeout {
0% {
-webkit-transform: scale(1);
opacity: 1;
}
5% {
opacity: 1;
-webkit-transform: scale(1.05);
}
100% {
opacity: 0;
-webkit-transform: scale(1.35);
}
}

This works if the parent element is position: relative, and the element itself is position: absolute.
Clones the element and then animates it to change the size, change the values of left and top, and the set opacity: 0.
Fiddle: http://jsfiddle.net/Ej38P/1/