perfecting the animation of popovers

When I click on the button, a popover appears.

However, the pointer of the popover seems to be coming from a different direction.

I have been struggling to correct this issue. Any suggestions?

.popover {
  position: absolute;
  top: 50px;
  left: -175px;

  width: 400px;
    height: 200px;
    background-color: rgb(233, 212, 222);
    border-radius: 4px;
  box-shadow: 3px -2px 4px #AAA;
  transition: all linear 0.5s;
}

.popover-arrow {
    position: absolute;
    top: -16px;
    left: 180px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid rgb(233, 212, 222);
  width: 0;
  height: 0;
    transition: all linear 0.01s;
}

plnkr: http://plnkr.co/edit/SiwYgmkZjh2NuszI0q2E

The expected behavior is for the pointer of the popover to animate in the same way as the popover itself (from top to bottom)

cssangularjscss-animations

Answer №1

The reason behind this issue is the ng-hide class being applied to your .popover class, causing it to be positioned before the animation takes place.

top: -18px;
left: 20px;

To fix this, you can override it with the following CSS:

.ng-hide {
    top: -16px;
    left: -175px;
}

Answer №2

Big shoutout to @Valius79 for helping me figure this out!

.popover {
  position: absolute;
  top: 50px;
  left: -175px;

  width: 400px;
    height: 200px;
    background-color: rgb(233, 212, 222);
    border-radius: 4px;
  box-shadow: 3px -2px 4px #AAA;
  transition: all linear 0.5s;
}
.popover.ng-hide {
  height: 0;
  width: 0;
  background-color: transparent;
  top:-18px;
  left: 20px;
}

.popover-arrow {
    position: absolute;
    top: 35px;
    left: 5px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid rgb(233, 212, 222);
  width: 0;
  height: 0;
   transition: all linear 0.5s;
}


.popover-arrow.ng-hide {
  top: -36px;
  left: 5px;
}

Check it out on Plunker!

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

What techniques can be used to ensure an element remains visible within the viewport

I am currently working with an HTML element that is displayed when a button is clicked, similar to a popup. My goal is to determine if the element is within the browser's viewport and then position it accordingly inside the viewport. Is there a proper ...

javascripthtmlcss

The file uploader on the HTML page only allows for PNG files to be uploaded

Currently, I am working on an application where I am facing a challenge related to file uploads. Specifically, I have an input field like this: <input id="full_demo" type="hidden" name="test[image]"> I am looking for a way to restrict the upload of ...

jqueryhtmlcssjpeg

`Customizing Switch Colors on Bootstrap: A Guide`

https://i.sstatic.net/alsdy.png I obtained the code from Get Bootstrap. <div class="form-check form-switch"> <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked> & ...

htmlcssbootstrap-4bootstrap-5

Creating a secure @RestController that encrypts passwords and transmits data in JSON format using Hibernate

When developing a login/registration form in AngularJS and using Spring Boot, I encountered an issue with encrypting passwords into the database. After registering a user, my code for sending data to the database looked like this: @RequestMapping(value = ...

angularjsspringhibernate

Having an issue loading my home state in the tree detailview application

Greetings! I am encountering an issue while attempting to refresh a section of my angular page. The setup involves a tree in the home state and a detail view in the entities state. Whenever I make updates in the detail view, I want the tree to be reloaded. ...

angularjs

When I try to alter HTML using JS, I encounter an undefined error related to AngularJS

Using this specific function: function adjustContent(elemento){ if (document.getElementById(elemento).innerHTML.indexOf('&#10004;')>0){ document.getElementById(elemento).innerHTML=document.getElementById(eleme ...

javascripthtmlangularjs

Pause until the existence of document.body is confirmed

Recently, I developed a Chrome extension that runs before the page fully loads by setting the attribute "run_at": "document_start". One issue I encountered is that I need to insert a div tag into the body of the webpage as soon as it is created. However, a ...

javascripthtmlcssevent-handlingdom-events

Accessing a factory in a controller from a different module using AngularJS

Here we have the factory code located within the myApp module that handles user authentication: angular.module('myApp') .factory('userFactory', ['$http', function ($http) { var userFactory = {}; ...

angularjsangularjs-controllerangularjs-factoryangularjs-injector

Can I create interactive stacked shapes with CSS and/or JavaScript?

Trying to explain this may be a challenge, so please bear with me. I need to create an "upvote" feature for a website. The number of upvotes is adjustable in the system settings. The upvote controls should resemble green chevrons pointing upwards. For exa ...

javascripthtmlcssdrawingcss-shapes

Responsive design with Flexbox, interactive graphics using canvas, and dynamic content resizing

I'm having difficulties with my canvas-based application. I have multiple canvases, each wrapped in a div container alongside other content. These containers are then wrapped in an "hbox" container. The objective is to create a dynamic grid of canvas ...

javascriptcsshtmlcanvasflexbox

Occupying the entire width of a screen

Struggling to tidy up a website I'm working on for a client. I've spent countless hours trying to solve this issue! With my limited knowledge, I could really use some help with the code. The main challenge is making the top section of the site (o ...

csshtmlwidth

How to add icons to HTML select options using Angular

Looking for a way to enhance my component that displays a list of accounts with not only the account number, but also the currency represented by an icon or image of a country flag. Here is my current component setup: <select name="drpAccounts" class= ...

htmlcssangulartypescript

How to assign attributes to all child elements in Angular?

I have a unique component in Angular that I utilize throughout my app. It's a button component which I use by calling <app-delete-btn></app-delete-btn> wherever needed. I tried to set the tabindex="1" attribute for my component ...

javascripthtmlcssangulartypescript

Trouble with achieving equal height columns in nested flexbox layout on Google Chrome

I am looking to evenly space several sidebar blocks throughout a lengthy post. To achieve this, I have utilized Flexbox within the sidebar for handling the even distribution of the blocks and it has been working flawlessly. Check out Code Pen: http://cod ...

htmlcsssassflexbox

Tips for generating an ordered list that begins with 01

Currently, I am developing a Ruby on Rails application in which I am iterating over the tuto. .container .row .col-xs-12.col-sm-12 h1.text-gray Tutorials br .col-xs-10.col-sm-5.index-background - @tut ...

cssruby-on-railssassslim-lang

Introduce a transition effect to the MUI Chip component to enhance user experience when the Delete Icon

When the delete icon appears, it is recommended that the overall width of the chip increases smoothly rather than instantly. Here is the current code structure: CSS: customChip: { "& svg": { position: "relative", display: &quo ...

cssreactjsmaterial-ui

My code seems to be malfunctioning

I'm attempting to conceal the chatname div. Once hidden, I want to position the chatid at the bottom, which is why the value 64px is utilized. However, I encountered an error stating The function toggle3(); has not been defined. <div id="chat ...

javascriptjquerycss

Utilize strings as variables within SASS code

In my project, I have defined two variables called $person-color and $animal-color in a separate file named variables.scss. Now, I want to use these variables in my main stylesheet main.scss. The desired outcome is to have the following CSS styles applied ...

csssass

Error encountered in AngularJS and JSON server: [$injector:unpr] An unidentified provider was found: $resourceProvider <- $resource <- menuFactory

Hello everyone, I recently created a small AngularJS application and utilized a JSON server for my backend operations. Unfortunately, I am encountering an issue with the provider in my code. Upon running it, I am receiving errors as shown below: Uncaugh ...

javascriptangularjsjson

dynamically assigning a style attribute based on the dimensions of an image retrieved from a URL

My aim is to determine whether or not I should use an image based on its dimensions. To achieve this, I came across a function on stack overflow that can retrieve the dimensions of an image just by using its URL. Here is the code snippet they provided: f ...

javascriptcssreactjsimagematerial-ui