I can see from console.logs that the variable is updating every second. But the {{variable}} in the HTML isn't. If I select the text it updates, or if the container div is animated the variable updates.
In the .ts I have a
ngOnInit() {
this.ref.detectChanges();
}
and I tried calling this.ref.detectChanges() every second when I update the variable.
All of the {{}} are not being updated until something else happens. A *ngIf displays something, or a CSS animation is triggered. No errors in the console.
CSS animation for the drawer :
.moveOutProductDrawer{
left: -250px;
animation: scootch 0.3s forwards;
}
#keyframes scootch {
100% { left: -250px !important; }
}
And in another part of the .ts I'm changing the height and width directly.
Has anyone experienced this before? Does the presence of CSS animation mess with Angular?
For some reason, when I change how the window is positioned into the center of the screen, everything is back to normal.
.bigFlexcontainer{
/* display: flex;
align-items: center;
justify-content: center; */
position: relative;
width: 100%;
height: 100%;
}
with position relative and no more flex, the variables are updating correctly and all is well. Probably shouldn't matter, but in this case it solved the problem.
Related
In the React app I'm building, I would like a button to be hidden until certain conditions are met. Then I'd to animate it in from underneath another element.
At the moment I am always rendering the button and adding a class of "hidden" when I'd like it hidden.
The SASS looking something like this:
button {
display: inline-block;
width: 100%;
height: 63px;
transition: height 250ms ease-in-out;
font-size: 24px;
&.hidden {
height: 0;
}
}
But when the button hides, the element gets smaller, but the text is still visible. Similar to this: https://jsfiddle.net/dtu56e1j/
What am I doing wrong?
Or is there a better way to get a button to animate in?
IMO the other answers provide working, but complicated solutions to your problem. Simply put, you're missing a single CSS property - overflow: hidden.
I created this StackBlitz to illustrate the point.
However, the only modification necessary to the original code is this:
button {
overflow: hidden;
[...]
}
Fiddle to better match use-case: https://jsfiddle.net/smn6xgv2/
Because the button element has some internal padding, setting height: 0 doesn't completely remove the element from the display. To address that issue, we wrap the button inside a div and then animate the height of the div.
Additionally, the div should be left with the default display: block. In the original example, the display: inline-block causes the browser to reserve a minimum height of line-height. More info in this SO question
With a little work you could use translateY to get this done nicely
const el = document.querySelector("#testButton");
setInterval(() => {
el.classList.toggle("hidden");
}, 2000);
button {
display: inline-block;
background-color: darkblue;
color: white;
width: 100%;
height: 63px;
transition: transform 250ms ease-in-out;
font-size: 24px;
}
button.hidden {
transform: translateY(63px); /* or -63px to invert */
}
/* Make a wrapper class so that your button disappears on transform */
.wrapper {
height: 63px;
overflow: hidden;
}
<div class="wrapper">
<button id="testButton">My Button!</button>
</div>
I have a problem regarding CSS3's transitioning. As seen in the snippet of my CSS file below, I have made a footer slide up whenever it is toggled active (I do this using jQuery).
Whenever it becomes active, it pushes the content of the website upwards until it finishes its transition, at which point the content slides back down. It looks like the page expands, but this should not happen because of the position attribute. Why is this happening?
Thanks in advance for any help.
.footer {
height: 130px;
width: 100%;
position: absolute;
bottom: -130px;
background-color: #333;
transition: bottom 250ms ease-out;
}
.footer-active {
bottom: 0;
}
I found a solution to the problem. It seems whenever the element moves, the window will automatically scroll to the element's position. I fixed the problem by inserting overflow: hidden into the html's and body's CSS rule.
Any idea why this isn't working? The default style in CSS is opacity = 0. Not only does the opacity not change in the div I want to appear, but when the mouse goes over the link it doesn't even show it as being a link. (it works well when I use "visibility" instead of the opacity property, but it causes blinking due to the action triggering the "onmouseout" event)
<a href="#" onMouseOver=" document.getElementById('pop_up1').style.opacity = 1" onMouseOut="document.getElementById('pop_up1').style.opacity = 0">
Here's the CSS:
#pop_up1 {
opacity: 0;
position:fixed;
width: 100%;
height: 100%;
z-index: 2;
text-align: center;
}
Oh wait, I think I see the problem. Even though the #pop_up1 div is invisible it is still over all the links and thus nothing is registered by the mouse at all. Is there a way to solve this problem?
"Oh wait, I think I see the problem. Even though the #pop_up1 div is
invisible it is still over all the links and thus nothing is
registered by the mouse at all. Is there a way to solve this problem?"
-- use display:none instead of opacity to hide it, like
#pop_up1 {
display:none;
position:fixed;
width: 100%;
height: 100%;
z-index: 2;
text-align: center;
}
I am talking about this example (badAdviceGuy created it for me):
Grid css transition
.wrapper {
width: 300px;
}
li {
display: inline-block;
height: 40px;
width: 40px;
position: relative;
padding: 3px;
}
a {
display: block;
height: 40px;
width: 40px;
background: lightblue;
position: absolute;
-webkit-transition: .3s;
transition: .3s;
}
a:hover {
-webkit-transform: scale(2,2);
transform: scale(2,2);
z-index: 100;
background: lightgreen;
}
When I hover fast over the grid elements, the zoom effect abruptly stops, as soon as I'm out of the element. Well actually I read it does not stops, but reverts immediately when mouse is out again:
Starting and Reversing a Transition:
In general when a transition starts it must complete according to the transitionproperties set even if those properties are changed by another action. However at times it doesn’t make sense to do this.
A common case is mousing over an element that starts a transition and then quickly mousing out. The rule above says the :hover transition has to complete before transitioning back to it’s initial value, however this doesn’t match expected behavior.
Expected behavior is that on mouse out the original transition stops and immediately moves in reverse. This is what the spec calls for.
You can read the technical explanation about how this is accomplished, but the gist is that whatever part of the transition has happened up to the point where the mouse-out occurred now happens in reverse.
You don’t have to do anything to make this happen either. It’s all automatic.
My problem is that I do not want that.
I used to have a Javascript which does a fine full transition till finished, so I could swipe over all the grid, and single tiles move slowly out, and continue when I'm out of the tile area.
Would there be a easy and straight forward way to accomplish such in css?
for the following paragraph, I want to animate to scroll span element upon mouse hover. It will scroll to the right until the end.
<div class="one_line">
<span>
NoMagic framework doesn't try to put anything into the blackbox. We hope you read the core source code and try to get fully understanding before you start to using it. And we hope you forking our project and creating your own database helper function sets based on your need.
Using NoMagic, you will turn the MySQL database into a schemaless solution, the schemaless database will save your time so that you don't need to spend to much time in planning database table structure.
</span>
</div>
the css I already have
.one_line {
line-height: 1.5em;
height: 1.5em;
position: relative;
width: 600px;
overflow-x: hidden;
span {
white-space: nowrap;
height: 100%;
display: inline-block;
position: absolute;
&:hover {
animation-name: scroll;
animation-duration: 6s;
}
}
}
#keyframes scroll {
50% {
left: 100%;
}
}
Up to my knowledge using CSS animate we can only animate the entire tag itself but not the content in it (i.e.) in this case we can move the entire span across the page dimension but not the text inside it. So i made it using transform property which is more flexible.
I have a jsfiddle here to demonstrate this.
CSS Animate code that i had changed:
#keyframes scroll {
0% {
transform:translateX(0);
}
100% {
transform:translateX(-100%);
}
}
Hope this will be useful.