Is it possible to add animations to the alerts provided by angular ui bootstrap?
I am particularly interested in fading in an alert that lingers for a while before it automatically fades out again.
Sure, I created the following classes to do just that:
.alert.ng-hide-add,
.alert.ng-hide-remove {
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
display: block !important;
opacity: 1;
}
.alert.ng-hide {
opacity: 0;
}
The documentation for animating the ng-hide directive can be found here see the Animations section.
Related
iOS 11 has issues with inputs inside a fixed container more here, specifically with iOS 11 on focus + the keyboard cursor is misaligned to the input:
I have an element .rn-drawer that ought to be fixed to the top of page, while the rest of the page content is scrollable. The fixed element contains an input.
.rn-drawer {
position: fixed;
transition: all 0.25s ease-in-out;
display: flex;
height: 260px;
}
By simply applying the following .iOS-fix to the parent/root container I can resolve the misalignment of my input to keyboard.
.iOS-fix {
position: fixed; // causes jitter on scroll, but resolves fixed input alignment bug
/*position: sticky; // no jitter, but doesn't resolve fixed input alignment bug*/
/*transform: translate3d(0, 0, 0); // no jitter + resolves fixed input alignment, BUT loses fixed position on children (like .rn-drawer)*/
overflow-y: scroll;
height: 100%;
width: 100%;
}
BUT there is a really bad jitter/stutter on scroll, which after some research I believe that a solution for this is forcing GPU acceleration in the CSS by applying a transformation.
Ok, this solves this jitter and the fixed input alignments issue BUT now the postion:fixed; on .rn-drawer no longer applies; as transformations change the coordinate system for children elements (and thus my drawer is not fixed).
position: sticky; stops the jitter, but same issue with input misalignment.
Is there any viable solution that will solve the input alignment bug, but also allow my input container to be fixed AND not cause any jitter on scroll?
Thanks.
I have an Angular UI Grid element. I am periodically adding new items at the front of the data array. I'm only adding a few at a time (like 1 to 5 new items)
I would like the UI Grid to animate the new rows being added. Right now the rows are added immediately, which makes it jumpy. I want to the new rows to animate in so the UI Grid looks like it smoothly adds them in.
Is this easily possible? Is there an option for this?
It's a bit of a difficult problem because UI-Grid virtualizes the data, so there's no actual DOM elements being added and removed, or hidden and shown. That means you can't use regular Angular animation directives.
Instead you can use the $animate service to manually trigger animations on user interactions like adding and deleting rows. This "fakes" the transition, making it look like the DOM has been altered when it hasn't.
Say you wanted to fade in new rows. You'd need to have some identifier on the row data coming in, and selectively apply & remove a class based on that. You'd set opacity: 0 immediately, then use $animate.removeClass() to transition to opacity: 1. The CSS might look like this:
.new-row {
opacity: 0;
}
.new-row-remove {
-webkit-transition: 1s linear all;
-moz-transition: 1s linear all;
-o-transition:1s linear all;
transition: 1s linear all;
opacity: 0;
}
.new-row-remove-active {
opacity: 1;
}
For deleting rows, you would need to reverse the operation: add a delete-row class that would transition from full opacity to 0, then use a promise handler to actually remove the row once $animate.addClass() is done. Here's the CSS:
.delete-row-add {
-webkit-transition: 0.5s linear all;
-moz-transition: 0.5s linear all;
-o-transition: 0.5s linear all;
transition: 0.5s linear all;
opacity: 1;
}
.delete-row-add-active {
opacity: 0;
}
That's the short answer. For a much longer explanation and a demo, I have a write-up available here: http://brianhann.com/ui-grid-and-row-animations
I am developing a generic loader for our app that uses the built in ember loading substate. It currently uses a bit ID'd loading to pull it, then pulls this loading piece from the controller (Details here: http://emberjs.com/guides/routing/loading-and-error-substates/). It is properly pulling up this loading state, and displaying text/other animations I have done so I know it to not be a problem with my assets or it loading the specific CSS being used. This is the snippet for the animation:
$bg: #f0efee; $c: #c31230; $size: 60px; $ease: 1s ease-out;
body { background: $bg; }
#loading {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
width: 0; height: 0; margin: auto;
#include border-radius(100%);
#include box-shadow(inset 0 0 0 $size/2 $c);
animation: load $ease infinite;
}
#keyframes load {
100% { width: $size; height: $size; box-shadow: none; }
}
And here it is being called in the main application view in the loading template (as an emblem file):
#loading
And here is a codepen of this working live: http://cdpn.io/CczlK
I have tried breaking it in just about every way imagineable, but all other loaders I have tried that are pure CSS3 have functioned properly and I have no idea where to go from here. Anyone have some suggestions or another way to break it that might help me dig a little further in?
You are missing vendor prefixes on animation. Compass unfortunately doesn't include those. You'll need to either use Bourbon instead of Compass (my recommendation) or add separate properties for:
-webkit-animation
-moz-animation
-ms-animation
-o-animation
animation
And also each for #keyframes (so #-webkit-keyframes and so on). It appears that it was working on CodePen because they must be adding the prefixes for you.
I've noticed when I'm watching a video and I click on the logo or a related video that a red progress bar (above the logo) dashes across the screen. At the same time there is a slight overlay to "grey" out the content then it fades in the new page. FYI, the URL changes to the new URL before the progress bar and transition happens.
The div ID of that bar is progress. Looks like some kind of cool jQuery ajax load but changing pages. I don't know.
YouTube is using the HTML5 History API to add and remove page URLs to the history stack. This results in the URL changing in the address bar, and the back/forward buttons working, while still actually loading the page via JS (ajax).
The easiest way to implement the API with backwards compatibility at this point is by using History.js. By backwards compatibility I mean falling back to the hash tag method for older browsers that do not support the HTML5 History API yet.
Check out the History.js demo!
I think Twitter is probably the best known example of a website using hashed URLs. For example twitter.com/#!/username has been a common sight for years. The problem with this method is that hash tags are client side, thus you need JS to read them and serve the proper content. Any non-JS user clicking a hashed URL will just land on Twitter's homepage.
Beatport was one of the first major websites using the HTML5 History technique by the way. SoundCloud has recently implemented it too. Both sites needed HTML5 History badly, to ensure audio playback while visitors browse through pages.
Youtube has open-sourced the library they use for dynamic navigation called spfjs.
Structured Page Fragments — or SPF for short — is a lightweight JS framework for fast navigation and page updates from YouTube.
Using progressive enhancement and HTML5, SPF integrates with your site to enable a faster, more fluid user experience by updating just the sections of the page that change during navigation, not the whole page. SPF provides a response format for sending document fragments, a robust system for script and style management, an in-memory cache, on-the-fly processing, and more.
looking at this demo, maybe could help you, and look at the comments, some say nice while some say too complicate to achieve it
html:
<div>
<dt></dt>
<dd></dd>
</div>
css:
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 1%;
height: 2px;
background: #0088CC;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear;
}
#progress dd, #progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #0088CC 1px 0 6px 1px;
-ms-box-shadow: #0088CC 1px 0 6px 1px;
-webkit-box-shadow: #0088CC 1px 0 6px 1px;
box-shadow: #0088CC 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
#progress dt {
opacity: .6;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px);
}
#progress dd {
opacity: .6;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px);
}
js:
$(document).ajaxStart(function() {
//only add progress bar if added yet.
if ($("#progress").length === 0) {
$("body").append($("<div><dt/><dd/></div>").attr("id", "progress"));
$("#progress").width((50 + Math.random() * 30) + "%");
}
});
$(document).ajaxComplete(function() {
//End loading animation
$("#progress").width("101%").delay(200).fadeOut(400, function() {
$(this).remove();
});
});
Does anyone know how to render the background of the jquery ui tabs or accordion controls as transparent?
Add this to your css file:
.ui-accordion-content-active
{
padding: 0 !important;
border-style: none;
background-color: transparent;
background-image: none;
}
You can adjust the padding to whatever fits your needs.
Find the correct line in the css and change the background attribute to transparent.
In CSS you can make use of the rgba(int, int, int, float) function to define a color. So, I guess you want something like this:
background-color: rgba(255, 255, 255, 0.3);
Note that the RGB components are in the range [0, 255] (which is one byte) and the alpha channel is in the range [0,1].
in the jqueryui css file's 'Component containers' section, you can find the .ui-widget-content class and set
background: transparent;
Note: If you are using overlays, they might get messed up~