We Keep Coding

IntersectionObserver is not detecting

Hello I am trying to make sections animate on scroll using IntersectionObserver.
To do this i am trying to use javascript
code for css:
.hidden{
opacity: 0;
filter:blur(5px);
transform: translateX(-100%);
transition: all 1s;
}
.show {
opacity: 1;
filter:blur(0px);
transform: translateX(0);
}
code for js
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting) {
entry.target.classlist.add('show');
} else {
entry.target.classList.remove('show');
}
});
});
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));
code for html:
<section class="hidden"> <h1> heading </h1> </section>
after linking all the files together in html, my class hidden sections stay hidden and do not change to show
Error Message:
animater.js:5
Uncaught TypeError: Cannot read properties of undefined (reading 'add')
at animater.js:5:36
at Array.forEach (<anonymous>)
at IntersectionObserver.<anonymous> (animater.js:
2:13)
I want my code to change the sections in html with the class hidden to class show so that they animate on scrolling the page / viewing the section. Currently the code gives me the above specified error and the sections with class hidden stay with their hidden class.

you are getting error on line number 5
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry)
if (entry.isIntersecting) {
- entry.target.classlist.add('show');
+ entry.target.classList.add('show');
} else {
entry.target.classList.remove('show');
}
});
});
const hiddenElements = document.querySelectorAll('.hidden');
hiddenElements.forEach((el) => observer.observe(el));

Set dynamic height to the block with JS

Transition does not work with height: auto.
So I need to calculate and set the block's dynamic height with JavaScript to make the transition property work.
This is an example of my code:
<div class="accordion__item">
<div class="accordion__icon">
<div class="accordion__content">
</div>
</div>
</div>
const accItems = document.querySelectorAll('.accordion__item');
accItems.forEach((item) => {
const icon = item.querySelector('.accordion__icon');
const content = item.querySelector('.accordion__content');
item.addEventListener("click", () => {
if (item.classList.contains('open')) {
item.classList.remove('open');
icon.classList.remove('open');
content.classList.remove('open');
} else {
const accOpen = document.querySelectorAll('.open');
accOpen.forEach((open) => {
open.classList.remove('open');
});
item.classList.add('open');
icon.classList.add('open');
content.classList.add('open');
}
});
});
How can I do this?

It's not ideal but there is not much we can do with transitioning height.
For a workaround, give your open class a max-height property that is larger than your expect the largest open element to get. From there you can transition the max-height property.
There are also some optimizations you can make to your event listener callback. I don't believe you need to add open to all the elements in the accordion, just the item itself.
Try something like this:
const accItems = document.querySelectorAll('.accordion__item');
accItems.forEach((item) => {
item.addEventListener("click", () => {
const openItems = document.querySelectorAll(".open")
openItems.forEach(open => open.classList.toggle("open"))
item.classList.toggle("open")
}
});
Then in your css:
.open {
max-height: 200px
}
.accordion__item {
max-height: 0;
transition: max-height 200ms ease;
}

Can't get overlay to show up in javascript, but could in jquery

I want an overlay to show up when I click a search icon.
I managed to get it working using jQuery. But can't seem to get it working with javascript.
The click event does not seem to be registering and I don't know why.
I've checked all the class names so they match in the same in both the HTML and javascript
Here is the jQuery code that works:
import $ from 'jquery';
class Search {
constructor() {
this.openButton = $('.js-search-trigger');
this.closeButton = $('.search-overlay__close');
this.searchOverlay = $(".search-overlay");
this.events();
}
events() {
this.openButton.on('click', this.openOverlay.bind(this));
this.closeButton.on('click', this.closeOverlay.bind(this));
}
openOverlay() {
this.searchOverlay.addClass("search-overlay--active");
}
closeOverlay() {
this.searchOverlay.removeClass("search-overlay--active");
}
}
export default Search;
Here is the javascript code that does not work:
class Search {
constructor() {
this.openButton = document.querySelector('.js-search-trigger');
this.closeButton = document.querySelector('.search-overlay__close');
this.searchOverlay = document.querySelector('.search-overlay');
this.events();
}
events() {
this.openButton.addEventListener('click', function() {
this.openOverlay.bind(this);
});
this.closeButton.addEventListener('click', function() {
this.closeOverlay.bind(this);
});
}
openOverlay() {
this.searchOverlay.classList.add('search-overlay--active');
}
closeOverlay() {
this.searchOverlay.classList.remove('search-overlay--active');
}
}
export default Search;
No errors were shown in the javascript where the overlay was not showing.

You'll probably want to change your event listeners to use the correct this binding:
this.openButton.addEventListener("click", this.openOverlay.bind(this));
Or use an arrow function to go with your approach - but make sure you actually call the resulting function, as in the above approach the function is passed as a reference and is called. If you removed the additional () from the code below, it would be the same as writing a function out in your code normally - it would be defined, but nothing would happen.
this.openButton.addEventListener("click", () => {
this.openOverlay.bind(this)();
});
jQuery also uses collections of elements rather than single elements, so if you have multiple elements, querySelectorAll and forEach might be in order.

If we are speaking of ecmascript-6 (I see the tag), I would recommend to use arrow function to have this inherited from the above scope, and no bind is needed:
this.openButton.addEventListener('click', () =>
this.openOverlay()
);
The problems with your code are that a) the function creates new scope with its own this; b) bound methods are not being invoked.

Why Search? You're creating an Overlay. Stick with the plan.
No need to bind anything. Use Event.currentTarget if you want to.
No need to handle .open/.close if all you need is a toggle.
And the below should work (as-is) for multiple Overlays. The overlay content is up to you.
class Overlay {
constructor() {
this.toggleButtons = document.querySelectorAll('[data-overlay]');
if (this.toggleButtons.length) this.events();
}
events() {
this.toggleButtons.forEach(el => el.addEventListener('click', this.toggleOverlay));
}
toggleOverlay(ev) {
const btn = ev.currentTarget;
const sel = btn.getAttribute('data-overlay');
const overlay = sel ? document.querySelector(sel) : btn.closest('.overlay');
overlay.classList.toggle('is-active');
}
}
new Overlay();
*{margin:0; box-sizing:border-box;} html,body {height:100%; font:14px/1.4 sans-serif;}
.overlay {
background: rgba(0,0,0,0.8);
color: #fff;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
padding: 5vw;
transition: opacity 0.4s, visibility 0.4s;
visibility: hidden;
opacity: 0;
}
.overlay.is-active {
opacity: 1;
visibility: visible;
}
<button type="button" data-overlay="#search">OPEN #search</button>
<button type="button" data-overlay="#qa">OPEN #qa</button>
<div class="overlay" id="search">
<button type="button" data-overlay>CLOSE</button>
<h2>SEARCH</h2>
<input type="text" placeholder="Search…">
</div>
<div class="overlay" id="qa">
<button type="button" data-overlay>CLOSE</button>
<h2>Q&A</h2>
<ul><li>Lorem ipsum</li></ul>
</div>
The above is still not perfect, still misses a way to "destroy" events and not re-attach duplicate events to already initialised buttons when trying to target dynamically created ones.
Also, the use of Classes for the above task is absolutely misleading and unnecessary.

How to make Angular ng-switch animate(enter/leave) in more than one way?

I write an angular directive called 'cardViewer', which can show images inside it with animation.
When you press "prev" button, image slides left. When you press "next" button, image slides right.
I try to do this with ng-switch, which only supports .ng-enter and .ng-leave animation class. But I need two ways to enter(enter from left and right), two ways to leave(leave to left and right).
So I try ng-class to solve this problem. I hope it can add toLeft class before it switch, so it can apply specific css animation.
But it seems not working properly. When I press "next" button twice, it works fine. but when I press "next", then press "prev", new image enter in right direction, but old image leave in wrong direction.
My directive template:
<h1>hahaha</h1>
<div>
<button ng-click='prev()'>prev</button>
<button ng-click='next()'>next</button>
</div>
<div>current Card Index: {{displayCard}}</div>
<div class="card-container" ng-switch="displayCard">
<img class="card"
src="http://i.imgur.com/EJRdIcf.jpg" ng-switch-when="1"
ng-class="{'toLeft': toLeft, 'toRight': toRight}"/>
<img class="card"
src="http://i.imgur.com/StaoX5y.jpg" ng-switch-when="2"
ng-class="{'toLeft': toLeft, 'toRight': toRight}"/>
<img class="card"
src="http://i.imgur.com/eNcDvLE.jpg" ng-switch-when="3"
ng-class="{'toLeft': toLeft, 'toRight': toRight}"/>
</div>
directive:
angular.module('app', ['ngAnimate'])
.directive('cardViewer', function() {
return {
templateUrl: 'cardViewer.html',
link: function(scope, element, attr) {
scope.toLeft = false;
scope.toRight = false;
scope.displayCard = 1;
//when press prev, card slide to left
scope.prev = function() {
scope.toLeft = true;
scope.toRight = false;
if (scope.displayCard == 1) {
scope.displayCard = 3
} else {
scope.displayCard -= 1;
}
};
//when press prev, card slide to right
scope.next = function() {
scope.toLeft = false;
scope.toRight = true;
if (scope.displayCard == 3) {
scope.displayCard = 1
} else {
scope.displayCard += 1;
}
};
}
}
});
css:
.card-container {
position: relative;
height: 500px;
overflow: hidden;
}
.card {
width: 100%;
position: absolute;
}
.card.ng-animate {
transition: 1s linear all;
}
.card.ng-enter.toLeft {
left: 100%;
}
.card.ng-enter-active.toLeft {
left: 0;
}
.card.ng-leave.toLeft {
left: 0;
}
.card.ng-leave-active.toLeft {
left: -100%;
}
.card.ng-enter.toRight {
left: -100%;
}
.card.ng-enter-active.toRight {
left: 0;
}
.card.ng-leave.toRight {
left: 0;
}
.card.ng-leave-active.toRight {
left: 100%;
}
Here is my plunker: cardViewer
What's wrong with my code? What's the right way to make ng-switch enter/leave in more than one way?

The problem is that ngSwitch is destroying the scope of the current image before ngClass has a chance to execute and change that image's class from toRight to toLeft (or vice versa) before the animation starts.
ngSwitch creates a new scope and executes at priority level 1200, while ngClass executes at priority level 0.
To make it work, you just need to update your next and prev methods so they set the displayCard property in a $timeout, after toLeft and toRight are set, so ngClass has an opportunity to act on the new toLeft/toRight settings before ngSwitch destroys that scope.
So your next method, for example, would look like this:
scope.next = function() {
scope.toLeft = false;
scope.toRight = true;
// need to do this in a $timeout so ngClass has
// chance to update the current image's class based
// on the new toLeft and toRight settings before
// ngSwitch acts on the new displayCard setting
// and destroys the current images's scope.
$timeout(function () {
if (scope.displayCard == 3) {
scope.displayCard = 1
} else {
scope.displayCard += 1;
}
}, 0);
};
Here's a fork your plunk showing it working. Open the console to see log messages for when ngClass adds your classes and ngSwitch destroys and creates the scopes.
I left your original "next" and "prev" buttons there and just added "next (fixed)" and "prev (fixed)" buttons so you can compare the log messages and see how, using the original buttons, ngSwitch destroys the scope before ngClass executes, while in the fixed versions ngClass executes before ngSwitch destroys the scope.

Aurelia.js: How do I animate an element when bound value changes?

I am using Aurelia.js for my UI. Let's say I have the following view markup:
<tr repeat.for="item in items">
<td>${item.name}</td>
<td>${item.value}</td>
</tr>
Which is bound to a model "items". When one of the values in the model changes, I want to animate the cell where the changed value is displayed. How can I accomplish this?

This can be done with Aurelia custom attributes feature.
Create a new javascript file to describe the attribute (I called the attribute "animateonchange"):
import {inject, customAttribute} from 'aurelia-framework';
import {CssAnimator} from 'aurelia-animator-css';
#customAttribute('animateonchange')
#inject(Element, CssAnimator)
export class AnimateOnChangeCustomAttribute {
constructor(element, animator) {
this.element = element;
this.animator = animator;
this.initialValueSet = false;
}
valueChanged(newValue){
if (this.initialValueSet) {
this.animator.addClass(this.element, 'background-animation').then(() => {
this.animator.removeClass(this.element, 'background-animation');
});
}
this.initialValueSet = true;
}
}
It receives the element and CSS animator in constructor. When the value changes, it animates the element with a predefined CSS class name. The first change is ignored (no need to animate on initial load). Here is how to use this custom element:
<template>
<require from="./animateonchange"></require>
<div animateonchange.bind="someProperty">${someProperty}</div>
</template>
See the complete example in my blog or on plunkr

The creator of the crazy Aurelia-CSS-Animator over here :)
In order to do what you want you simply need to get hold of the DOM-Element and then use Aurelia's animate method. Since I don't know how you're going to edit an item, I've just used a timeout inside the VM to simulate it.
attached() {
// demo the item change
setTimeout( () => {
let editedItemIdx = 1;
this.items[editedItemIdx].value = 'Value UPDATED';
console.log(this.element);
var elem = this.element.querySelectorAll('tbody tr')[editedItemIdx];
this.animator.addClass(elem, 'background-animation').then(() => {
this.animator.removeClass(elem, 'background-animation')
});
}, 3000);
}
I've created a small plunkr to demonstrate how that might work. Note this is an old version, not containing the latest animator instance, so instead of animate I'm using addClass/removeClass together.
http://plnkr.co/edit/7pI50hb3cegQJTXp2r4m
Also take a look at the official blog post, with more hints
http://blog.durandal.io/2015/07/17/animating-apps-with-aurelia-part-1/
Hope this helps

Unfortunately the accepted answer didnt work for me, the value in display changes before any animation is done, it looks bad.
I solved it by using a binding behavior, the binding update is intercepted and an animation is applied before, then the value is updated and finally another animation is done.
Everything looks smooth now.
import {inject} from 'aurelia-dependency-injection';
import {CssAnimator} from 'aurelia-animator-css';
#inject(CssAnimator)
export class AnimateBindingBehavior {
constructor(_animator){
this.animator = _animator;
}
bind(binding, scope, interceptor) {
let self = this;
let originalUpdateTarget = binding.updateTarget;
binding.updateTarget = (val) => {
self.animator.addClass(binding.target, 'binding-animation').then(() => {
originalUpdateTarget.call(binding, val);
self.animator.removeClass(binding.target, 'binding-animation')
});
}
}
unbind(binding, scope) {
binding.updateTarget = binding.originalUpdateTarget;
binding.originalUpdateTarget = null;
}
}
Declare your animations in your stylesheet:
#keyframes fadeInRight {
0% {
opacity: 0;
transform: translate3d(100%, 0, 0);
}
100% {
opacity: 1;
transform: none
}
}
#keyframes fadeOutRight {
0% {
opacity: 1;
transform: none;
}
100% {
opacity: 0;
transform: translate3d(-100%, 0, 0)
}
}
.binding-animation-add{
animation: fadeOutRight 0.6s;
}
.binding-animation-remove{
animation: fadeInRight 0.6s;
}
You use it in your view like
<img src.bind="picture & animate">