javascript/AngularJS - make elements gradually disappear

Question

javascript/AngularJS - make elements gradually disappear

I need help implementing a fade effect for an icon in the middle of a picture that indicates scrollability to the user. Currently, when the user scrolls, I can hide the icon but would like to add a nice smooth fade-out effect.

Here is the HTML code snippet:

<div style="overflow: scroll;">
    <img id="fullImage" ng-src="{{imageUrl}}" imageonload>
    <img id="drag-arrows" class="drag-arrows" ng-src="images/icon-drag.png"/>
    <h3 id="optionName" class="optionName">{{ optionName }}</h3>
    <a class="close-reveal-modal" ng-click="cancel()"><img class="cancel-icon" ng-src="images/icon-close-fullscreen.png"></a>
</div>

Below is my directive that currently hides the drag arrows icon on touchmove event:

modalController.directive('imageonload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {

                // Code to resize and fit the image within viewport

            });

            element.bind('touchmove', function(){

              // Icon fade-out effect implementation needed here

            });
        }
    };
});

If anyone has suggestions on how to achieve this fade effect using AngularJS, please share!

javascript html css angularjs

Answer 1

Answer №1

For those utilizing jQuery, consider implementing the .fadeOut() method instead of arrows.style.display = "none";

arrows.fadeOut();

If jQuery is not in use, achieve this effect using CSS classes:

arrows.className = "drag-arrows hidden";

Add the following CSS code:

.drag-arrows {
    opacity: 1;
    -webkit-transition: opacity 0.5s; /* For Safari 3.1 to 6.0 */
    transition: opacity 0.5s;
}

.hidden {
    opacity: 0;
}

Keep in mind that the CSS approach alters the opacity of the arrows, not the display property, as display cannot be animated directly. To set the display property to none with an animation, add an eventListener:

arrows.className = "drag-arrows hidden";
arrows.addEventListener("transitionend", function(){
    arrows.style.display = "none";
    arrows.removeEventListener("transitionend");
}, false);

To make the arrows visible again later on, use:

arrows.className = "drag-arrows";
arrows.addEventListener("transitionend", function(){
    arrows.style.display = "block"; // Or revert to previous display setting
    arrows.removeEventListener("transitionend");
}, false);

Answer 2

For those utilizing jQuery, consider implementing the .fadeOut() method instead of arrows.style.display = "none";

arrows.fadeOut();

If jQuery is not in use, achieve this effect using CSS classes:

arrows.className = "drag-arrows hidden";

Add the following CSS code:

.drag-arrows {
    opacity: 1;
    -webkit-transition: opacity 0.5s; /* For Safari 3.1 to 6.0 */
    transition: opacity 0.5s;
}

.hidden {
    opacity: 0;
}

Keep in mind that the CSS approach alters the opacity of the arrows, not the display property, as display cannot be animated directly. To set the display property to none with an animation, add an eventListener:

arrows.className = "drag-arrows hidden";
arrows.addEventListener("transitionend", function(){
    arrows.style.display = "none";
    arrows.removeEventListener("transitionend");
}, false);

To make the arrows visible again later on, use:

arrows.className = "drag-arrows";
arrows.addEventListener("transitionend", function(){
    arrows.style.display = "block"; // Or revert to previous display setting
    arrows.removeEventListener("transitionend");
}, false);

Answer 3

Answer №2

After putting together a Plnkr extracted from Angular Docs, it became clear that the real magic happens with CSS3 animations:

Link to ngAnimate documentation

Link to ngShow animations documentation

Here's the CSS code snippet responsible for all the animation effects:

.animate-show {
  line-height: 20px;
  opacity: 1;
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
}

.animate-show.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

Simply utilize the directive in your HTML:

 <p ng-show="vm.showText" class="animate-show">Some text</p>

And update the JavaScript accordingly:

vm.showText = false;

$timeout(function () {
  vm.showText = true;
}, 2000);

The $timeout simulates an asynchronous function, like an $http call.

Whether you're implementing this from a controller or a directive, the end result remains the same.

A helpful tip: extend the duration of the animation and observe the element changes in Chrome or Firebug console to fine-tune your CSS for desired outcomes.

Answer 4

After putting together a Plnkr extracted from Angular Docs, it became clear that the real magic happens with CSS3 animations:

Link to ngAnimate documentation

Link to ngShow animations documentation

Here's the CSS code snippet responsible for all the animation effects:

.animate-show {
  line-height: 20px;
  opacity: 1;
  padding: 10px;
  border: 1px solid black;
  background: white;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
}

.animate-show.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

Simply utilize the directive in your HTML:

 <p ng-show="vm.showText" class="animate-show">Some text</p>

And update the JavaScript accordingly:

vm.showText = false;

$timeout(function () {
  vm.showText = true;
}, 2000);

The $timeout simulates an asynchronous function, like an $http call.

Whether you're implementing this from a controller or a directive, the end result remains the same.

A helpful tip: extend the duration of the animation and observe the element changes in Chrome or Firebug console to fine-tune your CSS for desired outcomes.

javascript/AngularJS - make elements gradually disappear

Answer №1

Answer №2

Similar questions

This function is functional with jquery version 1.4.2 but encounters issues with jquery version 1.9.1

Tips for displaying content when clicking on the opener containing tables or div elements

Tracking in node.js to detect the creation of a new file

Troubleshooting Display Problems when Switching Bootstrap Themes in ASP.NET MVC

The process on how to access dynamic object properties within a parent component while using v-for in a child component

Trouble accessing selected value from drop down list in ASP.NET codebehind following modification of Javascript attribute

Guide to positioning an image absolutely within a div

Using JQuery's .mouseover and .mouseout methods to modify font colors on a webpage

The function createReadStream completes execution without resolving

Encountering issues while trying to establish a connection to MongoDB through JavaScript

Stop a user from adding duplicate tasks

Using Angular.JS to iterate over a nested JSON array using ng-repeat

The window.onload event is failing to trigger on mobile devices, although it is functioning properly on desktop. (using react js

Transferring data using Ajax in a contact form PHP file

What is the best way to extend a column across multiple rows with bootstrap?

Having trouble directing input to embedded swf upon page load in Opera

Adjust width based on value dynamically

Is there a clash between Angular JS $scope and the MIME content-type in an API's HTTP response?

Navigating through React Native with TypeScript can be made easier by using the proper method to pass parameters to the NavigationDialog function

How can Next-auth handle redirection for 401 errors?