Using ng-animate to provide some transitions when a user clicks into a tab.
Simply using
.ng-enter{
transition:0.50s;
opacity: 0;
}
.ng-enter-active{
opacity: 1;
}
which works a treat. However, the first time you click in it's somewhat sticky.
The view which is being transitioned into displays for a brief second before being transitioned into, so you see it twice almost. This only occurs on the first time round, on subsequent visits the transition works perfectly.
Is there a way then to make the animation smoother the first time round? The tabs are being displayed using a div with ng-include.
You have to target the animation on the tab elements, like this :
.tab.ng-enter {
transition:0.5s linear all;
opacity:1;
}
.tab.ng-enter.ng-enter-active {
opacity:0;
}
ngAnimate (like ngLeave, ngEnter, etc...) classes will be added to each element appearing/disappearing in the view, so in your case, it is needed to restrain your animation to only one element.
You can see the documentation too.
Related
I have an image that I wanted to zoomIn on page refresh. The image is located at the very top of the page. When you open the page from another webpage the image is there for a split second, disappears and then zooms in as the element is supposed to. How do I get the appearance for the split second to not show at all and just have the image zoomIn from 0 opacity?
Here is my code for this project:
#keyframes zoomIn {
from {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
100% {
opacity: 1;
}
}
.zoomIn {
-webkit-animation-name: zoomIn;
animation-name: zoomIn;
}
<div class="Header-Image-Container rellax">
<img src="images/Calibrator_Logo_Text_NoBackground.png" alt="Header Picture" class="Header-Image
wow zoomIn" data-wow-duration="3s" />
</div>
Here is a link to the actual site where I am having the issue: www.calibrator.ca/TestSite. I am just trying to have the image start from a 0 opacity and then zoom to a 1. To me it looks as if the css code would accomplish this but when it renders in chrome and firefox it has this flash of the image before it disappears. Any help is appreciated.
If there is any delay at all between the painting of the loaded image and the start of the animation (likely), the image will be visible for a short amount of time, causing the flash you see. A solution is to style the image with visibility: hidden at the start, and then set visibility to visible as the first frame of your animation (or use JavaScript to make it visible). (You could alternatively initially style the image to opacity: 0 but then you might also see a non-scale3d'd image for a split second at the beginning, so you'd need to style that initially as well; probably easier just to start with visibility: hidden.)
By the way, with your code as written, you also risk the animation occurring before the image has loaded (something you might not notice with a fast connection and cached image). If that happened, your animation would essentially be invisible to users. A solution would be only to add the animation class (zoomIn) to your image after the image's load event has fired. (Ideally you'd attach a load handler to the image using addEventListener(), but you could also keep it simple and use an onload attribute directly in your <img> tag.)
Many transitions in Bootstrap 4 provide a set of events to listen for. For example, you could do something like:
$('.certainDropdowns').on('hidden.bs.dropdown', function() {
// do the things
});
A light inspection of some of the components shows that somehow they are able to respond to fading. For example, the Bootstrap modal fires a "hidden" event once it has faded out. But this is at the modal level, not the transition level (hidden.bs.modal)
Unlike dropdowns and modals, there is not a "fade" JavaScript component. But the light scan of the source code seems to be indicating that Bootstrap provides emulation for CSS transitionEvent, and I'm trying to figure out how I can tap into it.
In brief:
Is there a Bootstrap 4-provided method for tapping into the fade transition's events, or am I limited to native transitionend (possibly with help from a 3rd-party polyfill)?
[edit to add content below]
I possibly should have tried transitionend before posting the question, but I just gave it a try and it seems to be no go like this:
<div id="something" class="fade show">Fadeable</div>
Then JS:
$('#something').on('transitionend', function() {
console.log('transition ended!');
});
//later
$('#something').removeClass('show');
This was tested only with the latest Firefox, which is one of my target browsers.
I couldn't find a way to do it in my intended way with the provided components. Instead, I ended up writing it as a single new class, "collapseFade" which could still use the Bootstrap pattern of adding/removing the class "show".
The tricky thing was that transitions would trample over each other if I just tried to add or remove the "show" class, so I had to add a second helper class, "out". This requires intimate understanding of the new classes, which was potentially hazardous to maintenance developers. Consequently, I wrote a jQuery plugin to go with it. Without using this answer as code repository, here's the lightweight breakdown:
SASS:
.collapseFade {
max-height: 400px;
transition:
max-height 0.5s,
opacity 0.5s 0.5s;
&:not(.show) {
opacity: 0;
max-height: 0;
}
}
.collapseFade.out {
transition:
max-height 0.5s 0.5s,
opacity 0.5s;
&:not(.show) {
opacity: 0;
max-height: 0;
}
}
(You could theoretically use Bootstrap's SASS fade variables instead of hard-coding time intervals).
Then the plug-in (code not included, for brevity) simply allows you to call collapseFade on an element. Eg. $('.something').collapseFade(). It optionally accepts "show" or "hide" as string parameters, but will just toggle by default. For whatever reason, transitionend is working here, so I also listen and fire an appropriate custom event for future maintenance or feature devs who might find it useful.
It functions thus: when showing, it removes the out class and adds the show class. When hiding, it adds the out class and then removes the show class.
The so-called "magic" is just in the timing. The second transition start is delayed by a value equal to the first transition time, which visually chains them together even though technically they are fired at the same time.
The other tricky bit is that the collapse animates max-height rather than height. This is the way Bootstrap themselves do it, and it makes sense... you can't animate "auto" height; it needs an actual target number. But straight-up "height" (no "max") means you're committed to occupying a certain amount of space. Max-height will allow height to be dynamic, but the trade-off is that it will operate smoothly only by restricting it as closely as possible. If I had put max-height of ten-thousand, for example, the collapsing animation wouldn't be smooth. You might notice that in Bootstrap's own collapse functionality, which is less than smooth for elements that are not tall. I don't anticipate my targets to be any taller than 400px so that's what I've provided.
I would like to be able to loop a colour transition for the background colour of my website, so it slowly shifts between two subtly different hues as the users browse, to give variation to their browsing experience. I'm wanting something like the following:
.background {
background-color: #00A0D6;
transition: background-color: 100s;
}
But with background-color cycling back to #00A0D6, then beginning the transition back to #00B1D7 as soon as it has reached #00A0D6. I would also like this to happen automatically, from the moment a user browses to the site.
If possible I would like to do this in vanilla CSS. If not, is there a way to use a Javascript loop to cycle the value in this way? Possibly with the jQuery library? I would like the most processor-efficient method possible which still retains a smooth transition, since this is for an online RPG, which will be doing a lot of other transitions and databasing at the same time.
You can use CSS #keyframes to achieve what you want:
#keyframes changeColor {
from {
background-color: #00A0D6;
}
to {
background-color: #00B1D7;
}
}
Then you use it with the animation property in the desired elements:
html, body {
animation: changeColor 100s infinite alternate;
}
More on CSS Keyframes here.
I have a dialog in which I'd like to display one of two things depending on the state of a variable. So, I hooked up 2 versions of a form with ng-if.
When you click "delete" button on first state, it toggles to the second state.
I wanted to make it less abrupt, so I tried adding some css:
[ng-if].ng-enter {
animation: fadeIn .5s;
}
[ng-if].ng-leave {
animation: fadeOut .5s;
}
These animations come from the bower package "animate css":
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
animation-name: fadeIn;
}
However, as you can see in my animated GIF below, what happens is that for a second BOTH forms appear, making the dialog taller, then one fades out.
Is there no way to do a simple fadein/fadeout as in jQuery? I used to do this all the time with it, but trying to get nice UI animation in Angular is eluding me.
I had a similar problem with an Angular app and animations. I ended up having to use jquery - I wish I had a better answer - but it turned out beautifully. One note, though, I had to wrap any jquery I used in a noConflict() and use body on click plus the element because it doesn't exist yet in the DOM:
$.noConflict();jQuery( document ).ready(function( $ ) {
$('body').on('click', "#toggler", function(){
$('#div_to_show').slideDown();
});
});
I realize this a tangential answer and not an elegant solution but it worked for me to get it out the door under a tight deadline.
A clean solution is to change the state you use to check which form is to display when the animation ng-leave ends.
You can use a second variable to set the ng-leave class in the form that will be hidden.
I can't post you some code because i don't know your js and html.
How can we show text in zoom in effect. I saw it on one travel site. I did google but cant find this kind of effect. I just want little hint what kind of effect is this. I red about easing but did not find the same effect. I have attached screenshot for the same. Here is link of that website http://cleartrip.com/flights?ui=v3. The effect is on payment page
Ok, so when you do something to make the section appear, the button within it animates from nothing to 100% size from its center point. So basically what you are asking is how to make something grow from 0% to 100% via animation. There's probably a totally javascript way but I personally would use css animation for this.
Suppose you are adding a class to the parent div to reveal a section of content (in the example you linked to it is revealing a section of the order form) all you need to do is in the css add an animation to the button that is triggered when the section gets a class added. In my example below I'm calling the section 'page' and assuming you're adding a class of 'active' to reveal it - obviously these could be anything you like:
Html:
<div class="page">
<div class="animated_button">Look at me</div>
[other content that you don't want to animate]
</div>
Css:
.page{
display:none;
}
.active{
display:block;
}
.animated_button{
[styling for how you want your button to look]
}
.active .animated_button{
animation: growUp 0.4s;
}
#keyframes growUp {
0% { transform:scale(0); }
100% { transform:scale(1); }
}
Note that you may need to add vendor-prefixes for the transforms.
Here is a codePen - there's a few extra styles and stuff in there just to show an example of how it works:
http://codepen.io/chrisboon27/pen/weJmL