Experience the magic of Vaadin Animations as elements gracefully fade out and disappear with the vibrant Valo

Question

Experience the magic of Vaadin Animations as elements gracefully fade out and disappear with the vibrant Valo

I'm attempting to fade an element away from the screen with the following code:

comp.addStyleName("fade-out");

.fade-out {
    @include valo-animate-out-fade(2500ms, 1000ms);
}

However, once the animation finishes, the element reverts back to its original state on the screen. Is there a way to receive a callback when the animation completes so I can remove it? Alternatively, is it possible to achieve this using pure SCSS?

I've noticed that once the animation runs once, it cannot be repeated by removing and adding back the style. Is this the expected behavior?

EDIT: The issue of not being able to rerun the animation was due to removing and adding styles in quick succession within a listener. This goes unnoticed by the client, preventing the animation from occurring. Resolved this by separating the removal and application of styles through server pushing.

EDIT 2: To remove the element after the animation, I managed to achieve it by initiating a thread, pausing for the duration of the animation, and then performing the removal. While effective, it does seem like a clunky solution. Are there any better alternatives?

java css animation vaadin

Answer 1

Answer №1

While not focusing specifically on animations within the Valo theme, my answer delves into a more generalized approach to handling JavaScript functionalities in Vaadin, offering the ability to utilize callback functions on the server side. Although it utilizes jQuery, there may be potential to achieve similar results without it.

Here is an example class showcasing a callback function on the server side:

@SuppressWarnings("serial")
public class AfterFadeCallback implements com.vaadin.ui.JavaScriptFunction {
   @Override
   public void call(JsonArray arguments) {
      Notification.show("Faded!");                  
   }
}

Below is a simple demonstration of how to integrate the jQuery library with Vaadin's UI, along with instructions on invoking the above callback function from client-side JavaScript post-animation completion:

// Replace "jsquery.js" in the resource directory
// "VAADIN/scripts" (Maven Eclipse project src/main/webapp/VAADIN/scripts )
@com.vaadin.annotations.JavaScript({"vaadin://scripts/jquery.js"})
public class TestUI extends UI {

   @Override
   protected void init(VaadinRequest vaadinRequest) {
      com.vaadin.ui.JavaScript cjs = com.vaadin.ui.JavaScript.getCurrent();
      Button fadeButton = new Button("FADE");
      // An ID is required for JS identification
      fadeButton.setId("fadeButton");
      // Add Vaadin JavaScriptFunction to document 
      cjs.addFunction("org.example.javascript.AfterFadeCallback"
                           ,new AfterFadeCallback());
      fadeButton.addClickListener( click -> {
         // 'complete' defines the callback function after animation
         // This refers to the one added previously
         // However, it can accommodate any JS operations
         cjs.execute("$('#fadeButton').animate({opacity: '0.1'},"
                    +" {duration: 1500, complete: function() { "
                         +" org.example.javascript.AfterFadeCallback() } } );");
      });      
      setContent(fadeButton);
   }

...

}

Answer 2

While not focusing specifically on animations within the Valo theme, my answer delves into a more generalized approach to handling JavaScript functionalities in Vaadin, offering the ability to utilize callback functions on the server side. Although it utilizes jQuery, there may be potential to achieve similar results without it.

Here is an example class showcasing a callback function on the server side:

@SuppressWarnings("serial")
public class AfterFadeCallback implements com.vaadin.ui.JavaScriptFunction {
   @Override
   public void call(JsonArray arguments) {
      Notification.show("Faded!");                  
   }
}

Below is a simple demonstration of how to integrate the jQuery library with Vaadin's UI, along with instructions on invoking the above callback function from client-side JavaScript post-animation completion:

// Replace "jsquery.js" in the resource directory
// "VAADIN/scripts" (Maven Eclipse project src/main/webapp/VAADIN/scripts )
@com.vaadin.annotations.JavaScript({"vaadin://scripts/jquery.js"})
public class TestUI extends UI {

   @Override
   protected void init(VaadinRequest vaadinRequest) {
      com.vaadin.ui.JavaScript cjs = com.vaadin.ui.JavaScript.getCurrent();
      Button fadeButton = new Button("FADE");
      // An ID is required for JS identification
      fadeButton.setId("fadeButton");
      // Add Vaadin JavaScriptFunction to document 
      cjs.addFunction("org.example.javascript.AfterFadeCallback"
                           ,new AfterFadeCallback());
      fadeButton.addClickListener( click -> {
         // 'complete' defines the callback function after animation
         // This refers to the one added previously
         // However, it can accommodate any JS operations
         cjs.execute("$('#fadeButton').animate({opacity: '0.1'},"
                    +" {duration: 1500, complete: function() { "
                         +" org.example.javascript.AfterFadeCallback() } } );");
      });      
      setContent(fadeButton);
   }

...

}

Answer 3

Answer №2

Once the animation completes, the element reverts back to its original state on the screen.

.fade-out {
    @include animation(valo-animate-out-fade 2500ms 500ms forwards);
}

forwards indicates that the target will maintain the computed values from the last keyframe encountered during execution [1]. It is worth noting that I am not directly including valo-animate-out-fade because it is defined as:

@mixin valo-animate-out-fade ($duration: 180ms, $delay: null){
  @include animation(valo-animate-out-fade $duration $delay backwards);
}

I have observed that once the animation has run, it cannot be repeated by removing and then re-adding the style. Is this behavior normal?

Indeed. Keep in mind that Vaadin only sends updates to the client-side when changes occur. If you are removing and adding the style within the same listener call, no changes are actually communicated to the browser (thus, the animation won't reset).

Is there a way to receive a callback after the animation finishes so that I can remove it? Or perhaps achieve this using pure SCSS?

You cannot remove the component from the DOM using CSS alone (although it will stay hidden if you specify the animation to retain its final state). There is also an alternative approach discussed in [2] involving a Javascript extension, similar to the solution provided by @pirho.

Answer 4

Once the animation completes, the element reverts back to its original state on the screen.

.fade-out {
    @include animation(valo-animate-out-fade 2500ms 500ms forwards);
}

forwards indicates that the target will maintain the computed values from the last keyframe encountered during execution [1]. It is worth noting that I am not directly including valo-animate-out-fade because it is defined as:

@mixin valo-animate-out-fade ($duration: 180ms, $delay: null){
  @include animation(valo-animate-out-fade $duration $delay backwards);
}

I have observed that once the animation has run, it cannot be repeated by removing and then re-adding the style. Is this behavior normal?

Indeed. Keep in mind that Vaadin only sends updates to the client-side when changes occur. If you are removing and adding the style within the same listener call, no changes are actually communicated to the browser (thus, the animation won't reset).

Is there a way to receive a callback after the animation finishes so that I can remove it? Or perhaps achieve this using pure SCSS?

You cannot remove the component from the DOM using CSS alone (although it will stay hidden if you specify the animation to retain its final state). There is also an alternative approach discussed in [2] involving a Javascript extension, similar to the solution provided by @pirho.

Experience the magic of Vaadin Animations as elements gracefully fade out and disappear with the vibrant Valo

Answer №1

Answer №2

Similar questions

The issue with the placement of the Bootstrap navbar-brand

Execute a test utilizing the Selenium WebDriver

What is the best way to align three divs side by side using HTML?

Why do my padding and font size fail to match the height of my container?

Having trouble with Image and Css not displaying correctly when using CodeIgniter 3 with DomPDF?

Function for calling a CSS callback with jQuery

Include previous input as a "phantom" thumbnail to the slider element of type "range"

Exploring the semantics of CSS documents

Discover the secret to applying a gradient shade to the "border" element when it reaches full capacity with Vue's innovative Custom CSS package

"Transforming Images: Unveiling the Journey from Bitmap to

What could be causing the CSS height percentage to malfunction?

Tips for modifying the background color of an individual row within a table using the Document Object Model (DOM)

Importance of Order in Java String Operations

Error: Java Cannot Locate Class in Classpath with Wildcards

Consistent height for responsive images

Preserving form input after an unsuccessful submission: A simple guide

What is the best way to access a JSON file using Javascript or JQuery?

Tips for eliminating default classes from Mui Typography styling

Encountering a NoSuchMethodError related to the com.google.common.collect.ImmutableMap.of method while executing Selenium tests

Create a fully responsive full-page image layout without relying on the body tag