I've been trying to get a sequence of two animations running but I'm getting really annoyed as I just can't make it work! I need to fade a div in and then slide it to the right. Fade in is easy using:
.fadein.ng-hide-remove {
animation: 0.8s appear;
display: block!important;
}
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
#keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
and
<div id="settings" ng-show="settingsPanel" class="fadein"></div>
and
$scope.showSettings = function(){
$scope.settingsPanel = true;
}
Settings looks like this:
#settings {
background:#353734;
position:fixed;
top:0;
bottom:0;
left:-280px;
width:500px;
z-index:100;
}
I've completed sliding too in a similar way but to get them to trigger one after the other is proving impossible for me. Could someone show me how to do this please?
How about using keyframes as follows:
#settings {
background:#353734;
position:fixed;
top:25px;
bottom:0;
left:0px;
width:200px;
z-index:100;
}
.fadein.ng-hide-remove {
animation: 2.8s appear;
display: block!important;
}
#keyframes appear {
0% {
left: -100px;
opacity: 0;
}
50% {
left: -100px;
opacity: 1;
}
100% {
left: 0;
opacity: 1;
}
}
See working fiddle here:
http://jsfiddle.net/HB7LU/20650/
Why not set keyframes up for animations and simply set different stages for each animation. Bit like this
#keyframes slide-right {
0% {
left: -450px;
}
100% {
left: 0;
}
}
Related
I have a client who wants this exact keyframes animation to be migrated from their old website, except we want it to infinitely loop. I know that I can create a brand new slideshow from a JS array, but I was wondering if a preprocessor like Sass would enable me to just loop this thing the way it is. I appreciate any input.
#keyframes slidySlidesFadeInOut {
0% {
opacity:1;
}
8% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#slidySlides {
position:relative;
height:301px;
width:318px;
margin:0 auto;
}
#slidySlides img {
position:absolute;
animation-name: slidySlidesFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-duration: 180s;
}
#slidySlides img:nth-of-type(1) {
animation-delay: 150s;
}
#slidySlides img:nth-of-type(2) {
animation-delay: 120s;
}
#slidySlides img:nth-of-type(3) {
animation-delay: 90s;
}
#slidySlides img:nth-of-type(4) {
animation-delay: 50s;
}
#slidySlides img:nth-of-type(5) {
animation-delay: 15s;
}
#slidySlides img:nth-of-type(6) {
animation-delay: 0;
}
If you just want the animation to loop add this to style:
animation-iteration-count:infinite;
Or replace the animation name with:
animation: slidySlidesFadeInOut 180s infinite;
And this does not require SASS, although it is completely valid in SASS.
I want to update the data shown by a Directive using an animation:
slide old information off downwards;
while offscreen, change the data to be shown (I also presumably need to change the translateY from +100% to -100% at this stage)
slide the new content form above.
My approach is below, but it relies upon a $timeout. I have calibrated as best I can for my development machine but it is not always reliable, and leads to erratic visual effects. There must be a better way, such the second animation only starts when it is signalled that the first is complete?
This is my html
<div class="selectedRestoContainer divider">
<resto-elem
id="selectedResto"
resto="list.selectedResto"
idx="list.selectedIndex"
ng-class="list.animationClass"></resto-elem>
</div>
This is my css
.selectedRestoContainer {
$height : 65px;
height: $height;
overflow: hidden;
resto-elem {
min-height: $height; //
transform: translateY(-100%); // ensure that without .flash element is off screen
}
.flash-add { // start - off-screen above
transform: translateY(-100%);
transition: all 0.7s ease; // incoming - i.e. transition to 0
}
.flash, .flash-add.flash-add-active {
transform: translateY(0);
}
.flash-remove.flash-remove-active {
transform: translateY(100%);
transition: all 0.4s ease; // outgoing
}
}
And this is what I have in my controller
$scope.$on("selectedResto", (e, qname) => {
// start first animation (400ms set in css)
$timeout( () => this.animationClass = "", 0 );
// second animation starts 450ms later
$timeout( () => {
this.selectedIndex = qname;
this.selectedResto = this.recs[qname];
this.animationClass = "flash";
}, 450);
});
I've got something working (animation) but it doesn't look pretty.
When the animation/slide is triggered. The "leaving" slide pops to the left of the screen and hugs the "entering" slide.
It also overshoots the endpoint during animation then snaps back. My ng-animate css is as follows:
css :
.slide-leave, .slide-enter {
-webkit-transition: 5s linear all; /* Safari/Chrome */
-moz-transition: 5s linear all; /* Firefox */
-o-transition: 5s linear all; /* Opera */
transition: 5s linear all; /* IE10+ and Future Browsers */
/* The animation preparation code */
opacity: 0.5;
}
.slide-enter {
position: relative;
left: -100%;
}
.slide-enter.slide-enter-active {
left: 0;
opacity: 1;
}
.slide-leave {
opacity: 1;
}
.slide-leave.slide-leave-active {
position: relative;
opacity: 0;
left: 100%;
}
Here's a semi-working plunkr. Notice the "leaving" view hugs the "entering" view. You can get the animation started by pressing the black square in the header.
http://plnkr.co/edit/FG44cpJ65S4Gr6QZpm1X?p=preview
I have an Ext JS pie chart with too many items. Because of this legend overflows and few items are not visible. I took a look at Smart legends (https://market.sencha.com/extensions/ext-ux-chart-smartlegend). But that seems ugly when the legend items are too many, and that makes the Chart looks tiny. So I'm looking for a solution where it would add a vertical scrollbar (when legend is in left or right hand side of the graph).
I was trying to see if I could add the scrollable container to the graph on which I could add the legends and when it overflows, scrollable container would add the scrollbar. So I was trying to override the "Ext.chart.Legend", and override the 'createBox' function. But I'm not sure how to add the component to the Chart since createBox() adds the Sprite to the chart's surface. Not sure how to add the 'scrollable container' to the chart on which I could add the legend.
Basically I'm looking for the graph which looks like in the attached image. Please help me on this.!! I need it ASAP. Thanks in advance!
https://www.dropbox.com/s/4q9o6v5ei4ba96r/Chart%20Legend%20items%20with%20scroll%20bar.png
Thanks!
Omega
JavaScript:
Ext.override(Ext.chart.Legend, {
createItems: function() {
if (this.customLegend != null) {
this.customLegend.remove();
}
this.customLegend = $('<div class="custom-legend"></div>');
$(this.chart.el.dom).append(this.customLegend);
this.callParent();
},
createLegendItem: function(series, yFieldIndex) {
var colorItem = series.getLegendColor(yFieldIndex).match(/.+?\-(.+?)\-.+?/i)[1];
var legendItem = $('<div class="custom-legendItem"><div class="custom-legendItemMarker" style="background-color: #'+colorItem+'"></div>'+series.yField[yFieldIndex]+'</div>');
$(this.customLegend).append(legendItem);
legendItem.on('mouseover', function() {
series._index = yFieldIndex;
series.highlightItem();
});
legendItem.on('mouseout', function() {
series._index = yFieldIndex;
series.unHighlightItem();
});
legendItem.on('mousedown', function() {
var me = this,
index = yFieldIndex;
if (!me.hiddenSeries) {
series.hideAll(index);
legendItem.addClass('hide');
} else {
series.showAll(index);
legendItem.removeClass('hide');
}
me.hiddenSeries = !me.hiddenSeries;
me.legend.chart.redraw();
});
},
updateItemDimensions: function() {
return {
totalWidth: 0,
totalHeight: 0,
maxWidth: 0,
maxHeight: 0
};
},
updatePosition: function() {
},
removeItems: function() {
}
});
CSS:
.custom-legend {
position: absolute;
right: 20px;
top: 0;
height: 100%;
overflow-y: auto;
border: 1px solid #CCC;
padding: 20px;
min-width: 200px;
}
.custom-legendItem {
margin: 4px 0;
}
.custom-legendItem.hide {
opacity: 0.5;
}
.custom-legendItem:hover {
cursor: pointer;
font-weight: bold;
}
.custom-legendItemMarker { display: inline-block; width: 12px; height: 12px; margin-right: 12px; }
How can I add a loadmask within the launch method of the Ext.applcation to the viewport that will also covers floating components like windows when get showed?
Currently the mask work but does not cover any opened window.
I found the answer here, the trick is to increase the z-order of the mask:
Ext.getBody().mask().dom.style.zIndex = '99999';
I made a test, it works for me.
You can create custom loader that will hide itself when everything is loaded...
1.Create html holder in body:
<div id="loading-mask"></div>
<div id="loading">
<span id="loading-message">Loading. Please wait...</span>
</div>
2. Add css to properly position mask:
#loading-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
z-index: 1;
}
#loading {
position: absolute;
top: 40%;
left: 45%;
z-index: 2;
font-family: tahoma,arial,verdana,sans-serif;
font-size: 12px;
}
#loading span {
padding: 5px 30px;
display: block;
}
3. Create js function outside Ext.onReady call:
function hidePreloader() {
var loadingMask = Ext.get('loading-mask');
var loading = Ext.get('loading');
// Hide loading message
loading.fadeOut({ duration: 0.2, remove: true });
// Hide loading mask
loadingMask.setOpacity(0.9);
loadingMask.shift({
xy: loading.getXY(),
width: loading.getWidth(),
height: loading.getHeight(),
remove: true,
duration: 1,
opacity: 0.1,
easing: 'bounceOut'
});
}
4. Call hidePreloader method when all components and tasks are completed and ready, in your case after app.js launch method is fininshed loading, for example:
listeners: {
afterrender: function(form) {
hidePreloader();
}
}
here is a example in fiddle.
I preferred my solution with CSS:
body.x-masked .x-mask {
z-index: 20000;
}
since window z-index is 19001, so 20000 is not bad.