I m trying to use the cancel feature of angularJS's $animate : https://docs.angularjs.org/api/ngAnimate/service/$animate with the latest stable version: 1.3.2
But either I have failed to understand what it is supposed to do or it does not have the expected behavior:
I have a custom animation as such:
var animationPromise = $animate.addClass(element, 'move-items-animation', {
from: {
position: 'absolute',
},
to: {
left : item.x + 'px',
top : item.y + 'px'
}
}).then(function(){
element.classList.remove('move-items-animation');
});
$timeout(function(){
$animate.cancel(animationPromise); //promise.$$cancelFn is not a function`
}, 300);
So a basic CSS transform. In addition to this I have the following CSS transition:
.move-items-animation-add-active{
transition: 1s ease-in-out;
}
So first weird behavior: I get the error promise.$$cancelFn is not a function coming from https://github.com/angular/bower-angular-animate/blob/master/angular-animate.js#L1233
See fiddle: http://jsfiddle.net/q1L9ycsd/6/
So I changed slightly the code :
var animationPromise = $animate.addClass(element, 'move-items-animation', {
from: {
position: 'absolute',
},
to: {
left : item.x + 'px',
top : item.y + 'px'
}
});
animationPromise.then(function(){
// After canceling this is executed
element.classList.remove('move-items-animation');
});
$timeout(function(){
$animate.cancel(animationPromise); // The animation goes on
}, 300);
So now I don't have that error but the animation is not stopped but the callback from the animation is executed. Does this mean that I have to manually stop the animation there?
See fiddle: http://jsfiddle.net/524nfp0o/2/
I have also try to cancel the animation in a separate event with the same result, see fiddle: http://jsfiddle.net/0o24zw02/
So
1. Why the error in the first fiddle?
2. How to actually stop an animation?
Thanks!
It works in 1.4, I'm not seeing it documented in 1.3 $animate:
Not documented: https://code.angularjs.org/1.3.20/docs/api/ng/service/$animate
Documented: https://code.angularjs.org/1.4.0/docs/api/ng/service/$animate
I was actually having this issue with your library and your result is the only one :)
Related
I'm trying to make some element blink in css, under React/material-ui, using withStyle.
The syntax from this post looks nice:
https://stackoverflow.com/a/48320520/9316077
.blink {
animation: blinker 1s step-start infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
I simply tried the following:
'#keyframes blinker': {
'50%': {
opacity: 0,
},
},
'& .blink': {
animation: '$blinker 1s step-start infinite',
},
Adding the $ before blinkerbased on this issue:
https://github.com/mui-org/material-ui/issues/13793
But this crashes my webpage. Any idea? Thanks!
Keyframes name is generated since JSS core v10 so depending on which version you are using you need to use $ when you are referencing a scoped name or without when name/id is global.
I am using ionic modal in ionic project. the modal is appearing on page clearly, but when I am trying to enter any text into any textbox the keyboard is appearing on page.
Once the keyboard appeared, I am unable to see the html of modal and also unable to scroll modal.
kindly refer the screenshot.
Thank you.
Waited for long time and did't get any answer, So I have written some css to fix this issue, This is working in my project as well as dominik
also tried this. see the comment by him
#media(min-width: 680px){
.modal{ top: 0; height: 70%; }
body.keyboard-open.modal{ height: 90%; }
body.keyboard-open.modal.scroll{ overflow-y: scroll !important; }
}
.overflow-scroll.keyboard-up:not(.keyboard-up-confirm){
overflow-y: scroll;
height: 100% !important;
top: 0;
}
Had to come up with this fix. it worked for me, so give it a try: Put the code in your app.run
NOTE: this issue is normally caused when you set android:windowSoftInputMode="adjustPan" in your AndroidManifest.xml
Make sure jquery is included in your app.
window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);
function keyboardShowHandler(e){
setTimeout(function() {
var originalHeight = window.innerHeight-30;
var newHeight = originalHeight - e.keyboardHeight;
$('ion-modal-view ion-content').css("height", newHeight);
}, 0);
}
function keyboardHideHandler(e){
setTimeout(function() {
var newHeight = '100%';
$('ion-modal-view ion-content').css("height", newHeight);
}, 0);
}
I am using nvd3 and trying to add event handling while clicking on the chart. But I face some problems while implementing it and I am not able to get a solution due to lack of documentation of nvd3. I followed this link, but I still get the following error in the console:
ReferenceError: chart is not defined
Can anyone tell me what I am missing or any best solution for the event handling in nvd3.
Probably your problem is the name of the graph variable;
I make a fiddle for you.
In my example, "chart" is the name of the graph variable. Check out that also in your case it's the same.
var chart = nv.models.multiBarChart();
Anyway, with the fiddle you can see the full code. If you click on an item, you can see the messages in console.
http://jsfiddle.net/g952qb5c/
As suggested by Giordano, I looked for the name of the graph and the dispatch events. And then I have added these event listener in the options like this.
Note: This solution worked for the nvd3 and angular.
$scope.options2 = {
chart: {
type: 'pieChart',
height: 500,
x: function(d){return d.key;},
y: function(d){return d.y;},
showLabels: true,
duration: 500,
labelThreshold: 0.01,
labelSunbeamLayout: true,
legend: {
margin: {
top: 5,
right: 35,
bottom: 5,
left: 0
}
},
pie:{
dispatch: {
elementClick : function(e){
console.log('element: ' + e.value);
console.log(e);
}
}
}
}
};
Hope this will help to others also.
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);
});
Using ExtJS 4, I have the following window:
var mainWin = Ext.create('Ext.Window',{
title: 'IE Screwup Illustration',
id: 'MAINWIN',
constrain: true,
constrainTo: 'appdiv',
x: 0,
y: 0,
width: '100%',
height: 518,
moveable: false,
closable: false,
layout: {
type: 'border',
padding: 3
},
renderTo: Ext.Element.get('appdiv'),
}).show();
Note the rendering to an element called "appdiv", which is a element whose style is shown below:
#appdiv {
position: absolute;
left: 10px;
width: 90%;
height: 520px;
border: 1px solid;
overflow: hidden;
border-color: #000000;
}
There is no problem rendering the window. It appears within the appdiv without problems with a nice border around it.
The problem begins when I resize the browser. It appears that the window attempts to center itself on the screen instead of within the appdiv DIV. This causes it to be displaced within the DIV so that it renders below and to the right of the left corner.
I have tried various tricks, including an attempt to reposition the window when it resizes. Nothing seems to work and I cannot think of anything else.
Could someone please give some idea how to keep this window within its DIV when a browser is resized? Thanks...
I have created a JS Fiddle to illustrate how I usually solved the problem in my projects.
The solution is to listen to the resize event of the Component over which you would like to center your window, and then calculate your window's new position. In my example this component was the viewport.
Here is the listener, that gets the job done:
viewPort.on('resize', function(vp, width, height) {
var me = this,
winWidth = me.getWidth(),
winHeight = me.getHeight(),
left = (width -winWidth) / 2,
top = (height -winHeight) / 2;
me.setPosition(left, top);
}, mainWin);
I found the answer to the problem. It turns out to be a question of timing.
It didn't make sense that the setPosition() method suggested by Matyas seemed to be ignored, so I checked the "move" event. Apparently, when an Ext window is rendered to a <div>, it receives move events after resize events. I do not know why (perhaps experts in ExtJS internals can help here?).
So instead of doing the calculations shown in Matyas' resize listener, I created a move listener in mainWin. Mine was somewhat simpler, since I wanted the window to stay put at the <div>'s upper left corner:
listeners: {
move: function(theWin,xP,yP,theOp) {
if((xP != 0) || (yP != 0)) {
theWin.setPosition(0,0);
}
}
This way, any time the browser moved the window to a position other than where I wanted it, I would set it back. This solved the problem.
Thanks for all who responded to this question (including the comments). Without those responses, I would not have had the clues I needed to solve this problem.
Try this:
Ext.EventManager.onWindowResize(function()
{
mainWin.doComponentLayout();
}, this, {buffer: 1});
Ext.EventManager.onWindowResize(function() {
if(mainWin.isVisible()) {
mainWin.center();
}
}, this, {buffer: 1});