I've implemented ngAnimate into a project to help with animations, but I'm getting really odd behaviour with a certain element.
To add some background, we have a shop with categories and products inside the categories. I'm doing an ng-repeat with: data-ng-repeat="product in currentProductCategory.Products" and I have data-ng-class="{ 'open': product.ShowDetails == true }" on my root element.
My root element also has an id of product-{{product.Id}}-{{currentProductCategory.Id}} and I have a child element with id product-options-{{product.Id}}-{{currentProductCategory.Id}} which products expected results.
When clicking a button, I call a function that sets the max-height on the parent element to a desired height, and the animation is handled in the CSS. Here's the function code:
var reg = /\d+/g;
var productParentElement = $('#product-' + product.Id + '-' + $scope.currentProductCategory.Id);
var optionsElement = $('#product-options-' + product.Id + '-' + $scope.currentProductCategory.Id);
var productParentPaddingTop = parseInt(productParentElement.css("padding-top").match(reg));
var productParentPaddingBottom = parseInt(productParentElement.css("padding-bottom").match(reg));
var productParentTotalHeight = productParentPaddingTop + productParentPaddingBottom + productParentElement.height() + optionsElement.height();
var optionsElementPaddingTop = parseInt(optionsElement.css("padding-top").match(reg));
var optionsElementPaddingBottom = parseInt(optionsElement.css("padding-bottom").match(reg));
var optionsElementTotalHeight = optionsElementPaddingTop + optionsElementPaddingBottom + optionsElement.height();
var totalHeight = productParentTotalHeight + optionsElementTotalHeight;
if (product.ShowDetails) {
product.ShowDetails = true;
productParentElement.css("max-height", totalHeight);
} else {
product.ShowDetails = false;
productParentElement.removeAttr('style');
}
And my CSS for the closed and open classes:
Closed:
.products-list .product {
margin-bottom: 20px;
max-height: 200px;
overflow: hidden;
-moz-transition: max-height 2s ease;
-o-transition: max-height 2s ease;
-webkit-transition: max-height 2s ease;
transition: max-height 2s ease;
}
Open:
.products-list .product.open {
-moz-transition: max-height 2s ease;
-o-transition: max-height 2s ease;
-webkit-transition: max-height 2s ease;
transition: max-height 2s ease;
max-height: 200px;
}
The issue is that out of the many products over 4 categories, the same one which is the same product in each category is not animating open. It animates the close/shrink, but when opening, it just instantly appears open.
This has been gating on us for a long time now and it's becoming a real issue, any help is greatly appreciated.
UPDATE: Now none of the "products" will animate open, but they do animate closed. Could this be because I'm setting the max-height on the style rather than a class?
Sorry but this might sound like I am pointing out the obvious and I can't see the rest of your code but in your CSS, you have;
.products-list .product {
margin-bottom: 20px;
max-height: 200px;
overflow: hidden;
-moz-transition: max-height 2s ease;
-o-transition: max-height 2s ease;
-webkit-transition: max-height 2s ease;
transition: max-height 2s ease;
}
for your closed list which has a 'max-height: 200px' but is also the same in your open list;
.products-list .product.open {
-moz-transition: max-height 2s ease;
-o-transition: max-height 2s ease;
-webkit-transition: max-height 2s ease;
transition: max-height 2s ease;
max-height: 200px;
}
Which also has a max-height of 200px. So in this case you're asking it to transition from 200px to 200px. try changing the height of open classes to be bigger or smaller. Then it will transition.
Related
I am trying to make a message appear if the user doesn't scroll for specific amount of time and then make the text fade out as soon as the user scroll. What I have tried so far is not working.
I am looking for vanilla javascript solutions only.
thank you for your help.
// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");
function showMsg() {
scrollText.className = "show";
}
setTimeout(showMsg, 2000);
// make scroll button fadout ---------------
function scrollHide() {
var scrollText2 = document.querySelector("#scrollMsg.show");
var scrllTPosition = scrollText2.getBoundingClientRect().top;
var screenPosition = window.innerHeight / 0.5;
if (scrllTPosition < screenPosition) {
scrollText2.classList.add("scrollHide");
}
}
window.addEventListener("scroll", scrollHide);
#scrollMsg {
height: auto;
position: sticky;
bottom: 175px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
transition: opacity 0.7s;
}
#scrollMsg.show {
opacity: 1;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
}
#scrollhide {
opacity: 0;
-webkit-transition: opacity 0.7s ease-in-out;
-moz-transition: opacity 0.7s ease-in-out;
transition: opacity 0.7s ease-in-out;
}
<p id="scrollMsg">scroll</p>
I've added some large divs to allow us to scroll through the document.
// make scroll button appear ---------------
var scrollText = document.getElementById("scrollMsg");
window.addEventListener('scroll', (e) => {
console.log('user scrolled!')
scrollText.style.opacity = 0
});
#scrollMsg {
opacity: 1;
transition: opacity 1s;
}
<div style="height:100px"></div>
<p id="scrollMsg">scroll</p>
<div style="height:4000px"></div>
I am new with html, css and js and working on some baby projects to take more experience. This time I am learning how to use javascript on my site but I have a problem. I have an error-msg-block that I want to change its height with transition. Also in js I add the class that gives its properties and after 3s I remove it. When I add the class the transition works but when the class is been removed the transition stops working.
.transition-msg {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}
.error-window {
max-height: 200px;
background-color: rgb(241, 128, 128);
border: #888 solid 0.04rem;
border-radius: 0.2rem;
}
<input type="submit" name="submit" value="Sign In" class="btn">
<div id="form-msg" class="transition-msg"></div>
function onSubmit(e) {
e.preventDefault();
if(firstnameInput.value === '' || lastnameInput.value === '' || passwordInput.value === '' || emailInput.value === '' || !termsBox.checked) {
//alert('Please enter all fields');
msg.classList.add('error-window');
msg.innerHTML = '<p>Please enter all fields</p>';
// Remove error after 3 seconds
setTimeout(() => {msg.innerHTML = ''; msg.classList.remove('error-window')}, 3000);
There are two problems with your code.
The first is that in your CSS you've placed the background-color property on modifier class (your .error-window) and as soon as that class is removed the background is instantly disappeared because of the transition is set only for max-height. To fix this, simply move the background-color to the parent class, the .transition-msg class.
The second problem with animating the max-height is that within your JS code you're removing the HTML before the transition is done so the height of that div instantly becomes zero (if there's no content there's no height).
The solution would be to wait until the transition of max-height property is done and then remove the HTML.
Here's working DEMO
Basically, what it shows is that you can use another setTimeout() method inside of your current but one with a delay of 500 milliseconds to match the CSS transition and then remove the HTML.
setTimeout(() => {
msg.classList.remove('error-window');
setTimeout(() => {
msg.innerHTML = '';
}, 500);
}, 3000);
Please use the transition to the main class
Here:
.transition-msg {
max-height: 0;
overflow: hidden;
}
.error-window {
max-height: 200px;
background-color: rgb(241, 128, 128);
border: #888 solid 0.04rem;
border-radius: 0.2rem;
-webkit-transition: max-height 0.5s ease-in-out;
-moz-transition: max-height 0.5s ease-in-out;
-o-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}
I've been experimenting with Ace Editor and I've been trying to automatically "hide" (= not use the system defaults) the vertical/horizontal scrollbars, when not in use.
Is there a way? Any ideas?
Just add overflow:auto css to the right element. I think that could be .ace_scroller. Give me example with scrollers or find by yourself using Object Inspector (Ctrl + Shift + I ; Chrome, FF, Opera).
Edit:
There is your code:
body .ace_scrollbar-v {
overflow-y: auto;
}
body .ace_scrollbar-h {
overflow-x: auto;
}
Edit2:
Hide scrollbar If editor isn't hovered:
body .ace_scrollbar {
display: none;
}
body .ace_editor:hover .ace_scrollbar {
display: block;
}
Or with animation:
body .ace_scrollbar {
-webkit-transition: opacity .3s ease-in-out;
-moz-transition: opacity .3s ease-in-out;
-ms-transition: opacity .3s ease-in-out;
-o-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
}
body .ace_editor:hover .ace_scrollbar {
opacity: 1;
}
You may want to set the word wrap too.
editor.getSession().setUseWrapMode(true)
I am currently working on a site that utilizes a search function. I have a text box in the top corner and I want to set it so that whenever the user clicks into the box, it extends to twice the length that it currently is. How exactly would I do that? I have searched but cannot find any helpful information.
why don't you use CSS3 transitions? you could do something like this to make the width of the textbox increase:
input, textarea {
width: 280px;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
input:focus, textarea:focus {
width: 340px;
}
I'm using the following code.
By clicking on div id="popUpPane", the div and it's childs should appear and slowly fade in.
By clicking on the div again, it should slowly fade out and then disappear.
Firefox and Chrome (which is webkit too) behave that way and I know Safari did in an earlier version, too. But right know on Safari and on Safari Mobile nothing happens at all when I click on "popUpPane".
Is this a bug in Safari or is there something I could change to come back to the intended behaviour?
One addition: If I set -webkit-transition to -webkit-transition: opacity .5s ease-in-out; it works fine but the transition only appears on the first click. There's no transitions after that first one... If I delete the opacity-part in the java-script the opo-up works but there's no transition.
All other transitions on my site are working. But they all use only opacity and no visibility.
Here's my code:
CSS:
#popUpPane {
white-space:normal;
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
text-align:center;
vertical-align:middle;
visibility:hidden;
z-index:90;
}
#greyOut {
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color:#000;
opacity:0;
}
#popUpPicCanvas {
position:relative;
top:50%;
margin-top:-325px;
display:inline;
opacity:0;
z-index:100;
}
.fade {
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
HTML:
<div id="popUpPane" onClick="noPopUp()">
<div id="greyOut" class="fade"> </div>
<canvas id="popUpPicCanvas" width="1000" height="650" title="Bastian Beuttel" class="fade"></canvas>
</div>
Javascript:
var popUpPane = document.getElementById("popUpPane"),
greyOut = document.getElementById("greyOut"),
popUpPicCanvas = document.getElementById("popUpPicCanvas"),
popCanvasContext = popUpPicCanvas.getContext("2d");
var doPopUp = function(source,x,y){
var popUpPic = document.getElementById("pic"+source);
popCanvasContext.canvas.width = x;
popCanvasContext.canvas.height = y;
popCanvasContext.drawImage(popUpPic, 0, 0,x,y);
popUpPane.style.visibility = "visible";
greyOut.style.opacity = "0.7";
popUpPicCanvas.style.opacity = "1";
};
var noPopUp = function(){
greyOut.style.opacity = "0";
popUpPicCanvas.style.opacity = "0";
popUpPane.style.visibility = "hidden";
};
I hope someone can help me.
Thanks for your responds!
Yep, there is a bug in mobile Safari with simultaneous transition for opacity+visibility.
You can fix it using something except for visibility: in your case setting the width and height to 0 would help. However you must add the delay, so they would change not instantly.
Here is a dabblet with the working example: http://dabblet.com/gist/1642110
/**
* Delayed alternative for visibility
*/
a {
display: inline-block;
background: #888;
color:#FFF;
padding: 1em;
}
div {
width: 100px;
height: 100px;
background: lime;
transition: opacity 1s;
}
a:hover+div {
width: 0;
height: 0;
opacity: 0;
transition: width 0s 1s, height 0s 1s, opacity 1s;
}
Thank you!
Since this bug is now removed from the latest releases of webkit the problem is gone for safari and chrome.
i started to have problems since the position of my div also was transitioned so I wrote it like this:
.dofade {
-webkit-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
-moz-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
-o-transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
transition: visibility .5s ease-in-out, opacity .5s ease-in-out;
}