What is the best way to animate two distinct divs with just one click using AngularJS and CSS?

I am currently working on a project with two divs that are initially displayed in the center of the screen. When the user clicks on either the left or right button, one of the divs should scale and translate to fill the screen, while the other div smoothly slides off-screen in the opposite direction for a seamless transition. The issue I am facing is that the inactive div does not move along with the active div as it should. Despite the messy code, I have tried multiple solutions but have yet to clean it all up. Both divs should slide simultaneously in response to a button click, with the direction determined by which button was clicked.

Below are the CSS animations being used:

.side-left.ng-hide {
    display: block!important;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}

.side-right.ng-hide {
    display: block!important;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

Here is the updated file structure:


    <div class="section side-left" ng-hide="slide1">
        <a ng-click="slide1=!slide1">
            <i class="fa fa-chevron-circle-left pull-left"></i>
        </a>
    </div>

    <div class="section side-right" ng-hide="slide2">
        <a ng-click="slide2=!slide2">
            <i class="fa fa-chevron-circle-right pull-right"></i>
        </a>
    </div>
javascripthtmlcssangularjs

Answer №1

For a fun way to add flipping animations to your website, consider giving angular-flippy a try!

Answer №2

In my opinion, using animations instead of transitions might be more effective for your needs. Consider implementing left-in, left-out, right-in, and right-out animations when making changes. Make sure to set the classes side-in and other-side-out accordingly.

// Your custom code can go here

var testApp = angular.module('test', []);

testApp.controller('t', ['$scope',
  function($scope) {
    $scope.options = ['separated', 'binded'];
    $scope.data = ['', ''];
    $scope.current = -1;

    $scope.goleft = function() {
      if ($scope.current < 0) {
        $scope.current = $scope.data.length - 1;
      } else {
        $scope.data[$scope.current] = 'left-out';
        $scope.current++;
        if ($scope.current > $scope.data.length - 1) {
          $scope.current = 0
        }
      }
      $scope.data[$scope.current] = 'right-in';

    };

    $scope.goright = function() {

      if ($scope.current < 0) {
        $scope.current = 0;
      } else {
        $scope.data[$scope.current] = 'right-out';
        $scope.current--;
        if ($scope.current < 0) {
          $scope.current = $scope.data.length - 1
        }
      }
      $scope.data[$scope.current] = 'left-in';
    };


  }
]);
<!DOCTYPE html>
<html>

<head>
  <script src="//cdn.bootcss.com/angular.js/1.4.5/angular.js"></script>
  <script src="http://code.angularjs.org/1.4.5/angular-animate.js"></script>

  <style>
    .box {
      width: 100%;
      background: green;
      height: 100px;
      position: absolute;
      left: 0;
      top: 120px;
      visibility: hidden;
      -webkit-transition: visibility 0s linear 0.5s;
    }
    .left-in {
      -webkit-animation: leftin 0.5s linear;
      -webkit-transition: visibility 0s;
      visibility: visible;
    }
    .right-in {
      -webkit-animation: rightin 0.5s linear;
      -webkit-transition: visibility 0s;
      visibility: visible;
    }
    .left-out {
      -webkit-animation: leftout 0.5s linear;
    }
    .right-out {
      -webkit-animation: rightout 0.5s linear;
    }
    @-webkit-keyframes leftin {
      0% {
        -webkit-transform: translate(-100%);
      }
      100% {
        -webkit-transform: translate(0);
      }
    }
    @-webkit-keyframes rightin {
      0% {
        -webkit-transform: translate(100%);
      }
      100% {
        -webkit-transform: translate(0);
      }
    }
    @-webkit-keyframes leftout {
      0% {
        -webkit-transform: translate(0);
      }
      100% {
        -webkit-transform: translate(-100%);
      }
    }
    @-webkit-keyframes rightout {
      0% {
        -webkit-transform: translate(0);
      }
      100% {
        -webkit-transform: translate(100%);
      }
    }
    .box.red {
      background: yellow;
    }
    body {
      overflow: hidden;
    }
  </style>
  <script src="script.js"></script>
</head>

<body ng-app="test">
  <div ng-controller="t">
    {{data}}
    <br>{{current}}
    <br>
    <a ng-click="goleft()">go left!!</a>
    <a ng-click="goright()">go right!!</a>
    <div class="box" ng-class="''+data[0]">left</div>
    <div class="box red" ng-class="''+data[1]">right</div>
  </div>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to invert the orientation of an object within a canvas?

As I was experimenting with Javascript, I attempted to implement a feature where my 'Player' character would fall down after reaching a jumpDistance of 50. The idea was to simulate a small jump-like motion for the player. While the code may not ...

javascripthtml

Eliminate the standard blue border that appears when control-clicking on table elements

I've encountered this question before, but unfortunately none of the solutions provided have worked for me. Some things I've attempted are: Using event.preventDefault() - did not produce the desired result. Removing user-select from CS ...

javascripthtmlcss

Choose from the selection of options in the select tag

In my HTML document, I am working on a feature where selecting an option from one select tag should dynamically populate another select tag with specific options based on the selection. This is the code snippet I have implemented: <script type ...

javascripthtml

Accessing the identical file concurrently through ajax 12 times

I'm facing an issue with loading the same external file multiple times on a page. When the page loads, it takes up to a minute due to large load times. I've tried using Ajax to load each file individually, but running a loop to load all files at ...

javascriptphpjqueryajax

What is the best way to delete the "Click to sort Ascending" text from the header of each column in a bootstrap-vue table?

Recently, I came across a bootstrap-vue table that caught my attention: https://i.sstatic.net/5jENs.png Below is the code snippet for the table setup: <template> <div class="container"> <h1 class="pt-2 pb-3">Bo ...

javascriptvue.jsvuejs2bootstrap-vue

Automatically resize textAreaInput in R shiny

I am attempting to adjust the technique outlined in this Stack Overflow answer on how to auto-resize a textarea input using JavaScript for shiny R. I prefer not to rely on additional packages like shinyJS. Initially, I experimented with a pure JavaScript ...

javascriptrshiny

Implementing an onClick event to reveal a concealed div located above each bar in D3.js (potentially requiring additional CSS code)

I'm currently working on a project where I want a hidden div, named myDiv, to be displayed above the clicked bar whenever a square bar is clicked. Here's what I've attempted so far: 1) I have written a Javascript function called showDiv() ...

javascripthtmlcssd3.js

Animating links with multi-line effects on :before.orEnhancing

As per the given query, I have a code snippet Is there any way to apply this effect to multiple lines of text instead of just one line? Currently, the effect only appears on one of two text lines (as shown in the example). :root { --00a3a3: #00a3a3; ...

cssanimation

Safari and Chrome have inconsistent line-height rendering, resulting in gaps between lines of

I have incorporated a <div> tag in my HTML with varying vertical spacing between lines of text. To achieve this, I am utilizing <br /> elements along with a CSS class that indicates the desired amount of spacing. For example, for a 5px gap, I ...

csshtmlsafarigoogle-chrome

Enhance the capability of the WordPress dashboard by incorporating a feature that allows users to specify

I'm currently developing a website that is reminiscent of . On this page, there are 3 images: Hovering on the left reveals image1. Hovering on the right displays image2. If the mouse remains idle, image3 is shown. I've successfully ...

phpwordpresshtmlwordpress-theming

Receiving an error of "undefined" when trying to capture the selected

One issue I am facing is capturing the selected user option and sending that value in a post request. Let's put aside the post part since it's not directly related to the main question at hand. Currently, the value is showing up as undefined. ...

javascriptjqueryhtml

Insert a fresh item into a MongoDB document array exclusively when a specific requirement is fulfilled

I am working with a mongoDB document structure that looks like this: Game = { _id: 'randomObjectId', players: [Array of players ObjectIds], maxPlayers: 2, status: 'created' (or 'fully-booked') } My goal is to update t ...

javascriptnode.jsmongodbmongoose

The Vuetify data-table header array is having trouble accepting empty child associations

My Vuetify data-table relies on a localAuthority prop from a rails backend. Everything runs smoothly until an empty child association (nested attribute) is passed, specifically 'county': <script> import axios from "axios"; exp ...

javascriptarraysruby-on-railsvue.jsvuetify.js

Limit the radius to only apply on big screens using tailwind css

Is there a way to apply border radius to an image only on larger screens and maintain straight edges on smaller screens? I'm working with Nextjs and Tailwind CSS. ...

cssresponsive-designnext.jstailwind-css

Utilizing the onchange function with a dropdown in a Bootstrap multiselect component

In my webpage, there are two divs for dual multiselect functionality - one for provinces and another for districts. When a user clicks on an option in the provinces list, it gets moved to another box where they can select several provinces. <div> ...

javascriptphpajaxtwitter-bootstrap

Make necessary changes to empty objects within a JSON array

Modify the null objects in a JSON array. I attempted to use map, but it did not update all the JSON objects. Here is an example of a JSON array: var response = { "code": null, "message": "Total 1 records found", "result": { "ordersList": [ ...

javascriptangularjs

Issue 404: Trouble sending form data from React to Express

I'm facing an issue when trying to send form data from a React frontend to my Node.js/Express backend. The problem seems to be related to a 404 error. I've included only the relevant code snippets below for reference. Function for submitting the ...

javascriptnode.jsreactjsexpress

Converting JSON data types into TypeScript interface data types

Struggling to convert data types to numbers using JSON.parse and the Reviver function. I've experimented with different options and examples, but can't seem to figure out where I'm going wrong. The Typescript interface I'm working with ...

javascripttypescript

Adjust the transparency of the other tab as I hover over the current tab

My latest project involves creating a dropdown menu. I want to make it so that when I hover over a tab, the opacity of the other tabs in the menu changes, except for the current tab. For example, when I hover over the Home Tab, the state of the Home tab a ...

javascriptjqueryhtmlcsstabs

A step-by-step guide on showcasing database data on an HTML page using jQuery

I am currently using jQuery to make an HTTP GET request and fetch JSON data from a database. After executing the request, I received the JSON array successfully. Now, I am attempting to display this JSON data on an HTML page by using the jQuery $(newData ...

jqueryhtmljson