here's the project I'm developing.
Test Project Link
Go to Products.
Click/Toggle Flush Mounts and Press Books
Observe the image below fades-in and out. As you can see, the first image fades out nicely but the second one pops-up instantly. How to make them both fade smooth and nicely?
HTML:
<div class="text-center font-zero">
<a class="category" ng-class="{active: flushMount}" ng-click="flushMount = true" ng-init="flushMount = true">
Flush Mounts
</a>
<a class="category" ng-class="{active: !flushMount}" ng-click="flushMount = false">
Press Books
</a>
</div>
<div class="container">
<div class="book-markers text-center">
<div class="book-item" ng-show="flushMount">
...
</div>
<div class="book-item" ng-hide="flushMount">
...
</div>
</div>
</div>
SCSS
.book-item{
#include transition(all 0.5s ease);
opacity: 1;
&.ng-hide-add,
&.ng-hide-remove{
display: inline-block !important;
}
&.ng-hide{
opacity: 0;
}
}
It's better to use the Angular most important feature, use ng-view and split the two views into two partials....when "Flush Mounts" is clicked the flush mounts div fade in smoothly and when you click "Press Books" the press books div fade in smoothly too.
ng-view example : http://jsfiddle.net/carpasse/mcVfK/3/
<ng-view>
</ng-view>
Part of the problem is that you always see "Flush Mounts" (on the top), either fading in or fading out. Fading out takes twice as long. I think that has to do with Angular's animation process and the fact that animations run in one cycle.
You have defined transition on your base class and display: inline-block; for ng-hide-add / remove. The animation process first adds the add and remove classes. In your case this already adds a transition display: none -> inline-block. Then ng-hide is added, which adds another transition opacity: 1 -> 0. Fading in on the other hand only has one transition.
I'm not entirely sure whose fault it is. I'd suggest that at first you position the divs above each other in terms of z-index instead of y coordinate. You should do that anyway. Then you can put the transition on the hide class (or .book-item.ng-hide), not directly on book-item.
Related
I am trying to make the "cloth" text and icon to change its opacity as soon as the mouse is entering parent's div area. At the same time I want to cancel the effect once the mouse is over the "opt" button, and change its color to blue
This what I was able to achieve, but if I hover over the "opt" button, the text and icon above still have the opacity effect:
.options-btns:hover {
background-color: #72b7f8;
}
#Cloth-Tool:hover #Cloth-Tool-img,
#Cloth-Tool:hover #Cloth-Tool-Text {
opacity: 0.6;
}
#cloth-option-btn:hover #Cloth-Tool-img,
#cloth-option-btn:hover #Cloth-Tool-Text {
opacity: 1;
}
<div onclick="runCloth()" id="Cloth-Tool" class="tools">
<img class="toolIcons" id="Cloth-Tool-img" src="./images/cloth.svg">
<p class="tools-text" id="Cloth-Tool-Text">Cloth</p>
<button class="options-btns" id="cloth-option-btn">OPT</button>
</div>
I also what to be able to detect where user clicks: parent div(including cloth text and icon area) or on "opt" to be able run functions such as "runCloth()" or "openOptions()" later on JS side
You can use an alternate method to achieve the same output. By using JavaScript and adding an event listener on the option button in which you will add hover as the event listener apply your required properties within JavaScript they will overwrite your properties of CSS. I you still can not get me idea let me know I will write a code for it.
I'm creating an accordion module in Elm with an open/close animation. Initially, the accordion body has an attribute style="height: 0". When opening the accordion I calculate the height of the hidden body and apply this by changing the attribute style="height: <contentheight>". This is how I get the CSS transition to work.
After the accordion body has been fully expanded I set style="height: auto". This is done using a setTimeout which matches the transition-duration time in the CSS. By doing this I allow the accordion body to resize automatically if its content changes after it has been opened.
In order to get the CSS transition working when I close the accordion, I first replace auto with a numeric value. I calculate the current height of the accordion body and put this in the height-style. After 1 millisecond (using setTimeout) I change to height: 0.
This works perfect in Chrome, but in IE 11 and Edge it fails about 80% of the time. If I increase the timeout to 50 ms it works every time, but of course there is a noticable input lag. If I use Browser.Events.onAnimationFrame instead of the 1ms timeout, it works in all three browsers, but since this requires a subscription in Elm it would be nice if there was a better way.
Are there other ways I can guarantee that IE and Edge will detect the attribute change if it's only there for 1ms?
Why not add a class to the accordion when you open it and make the changes that way?
In the example below, using a tranformation on the scaleY property allows you to go from zero to auto height.
document.getElementById('accordion-button').addEventListener('click', () => {
document.getElementById('accordion').classList.toggle('expanded');
});
#accordion {
transform: scaleY(0);
transform-origin: top;
transition: transform 300ms ease; // or however you want to handle this
}
#accordion.expanded {
transform: scaleY(1);
}
<button id="accordion-button">Click me</button>
<ul id="accordion">
<li>Some content</li>
<li>Some more</li>
</ul>
That way everything will be handled by the CSS transition.
http://www.polymer-project.org/components/core-animated-pages/demos/music.html
When you change the .card height in chrome console you will see that the small card tiles in the background hiding behind the big card, suddenly disappear completely when the animation is done.
Is there a way to tell a hero transition to not remove the parent section? Or a way to make the parent section disappear but gradually?
In this case it is ok because you don't see them disappear but when the background has a number of small cards that do not fit behind the large card it would look way better if they just stay in the background.
EDIT1:
#mini {
display: block !important;
}
#mini *[hero] {
opacity: 0.5 !important;
}
<section id="mini">
<template repeat="{{items as item}}">
<div class="chip" hero-id="{{item.id}}" hero?="{{muts === item }}" on-tap="{{transition}}">
</div>
</template>
</section>
EDIT2:
The second hero is not in the middle of the view port anymore when the background chips exceed the screen size.
Another workaround I found is to add an id and a bit of CSS to the core-animated-pages component.
My core-animated-pages looks like this :
<core-animated-pages selected="{{page}}" transitions="hero-transition"
on-core-animated-pages-transition-end="{{complete}}">
<section id="mini">
<div class="chip-container" hero-p on-tap="{{transition}}">
...
</div>
<div class="chip-container" hero-p on-tap="{{transition}}">
...
</div>
</section>
<section id="details">
...
</section>
</core-animated-pages>
Nothing special, I just have two lines of "chips". Note the id on the "chip-container container", it's the one that enables us to do some css modification directly in components/core-animated-pages/core-animated-pages.css. Those modifications are the following :
/*
Enables us to keep the "chip-container container" visible even after the hero transition
*/
*#mini {
display: block !important;
}
/*
Fades out the "chip" that realized a transition ([active] and .core-selected are removed
from the "chip-container container" during the transition)
*/
*#mini *[hero] {
opacity: 0 !important;
}
/*
Fades in the "chip" when everything goes back to it's original state ([hero] isn't
removed from the chip, but [active] and .core-selected are re-set on the "chip-container
container", so we use this to distinguish wish state we're in, and so if it's "legit" to
see the "chip")
*/
*#mini[active] *[hero] {
opacity: 1 !important;
}
Might not be the cleanest way but it works, I hope I explained well enough how I managed to achieve this result, and every tiny part of my solution. Feel free to comment / ask if that's not the case :)
If you add cross-fade-all to the list of transitions, the background cards will more gracefully fade out, rather than disappearing at the end of the animation:
<core-animated-pages
selected="{{page}}"
transitions="hero-transition cross-fade-all"
on-core-animated-pages-transition-end="{{complete}}">
You can test it on JS Bin.
Can you show your .js Code? You need to remove object.flush(); from your .js code. Hope this help.
Here is my HTML code:
<div class="mitcsinaltunk" style="position:absolute;left:5px;top:3px;text-align: left">
<div class="triangle"><img src="images/triangle.png"></div>
<img id="kep1" src="mitcsinaltunk/img1_s.jpg" class="mitcsinaltunk">
</div>
on #kep1.hover() starts an animation and fadeIn triangle.png. triangle.png is on #kep1. When I take the mouse on triangle.png, stops #kep1.hover() animation.
Can I make triangle visible, but disabled?
Try binding your .hover() event to the .mitcsinaltunk container instead. Your question is a little hard to understand (please post your JS), but my guess is that when the mouse hovers over triangle.png, mouse focus on the original image is lost, stopping the fade in animation. Binding to the containing element will solve this.
I am trying to implement an error message when user has disabled javascript. I have created a jsfiddle for my current work. I have 2 div layers one covering the whole page and an another one on top of that to show the warning message, but the opacity settings affects for the cover layer affects the warning message also. I have tried using the techniques from previous questions but I could not make it work. Can anyone help me?
http://jsfiddle.net/xcPcv/
Just move the message outside of the faded container ...
From:
<div id="fadeMe">
<div id="center">You have javascript disabled.</div>
</div>
To:
<div id="fadeMe">
</div>
<div id="center">You have javascript disabled.</div>
http://jsfiddle.net/xcPcv/7/
Instead of opacity, use rgba(0,0,0,.75) for the background:
http://jsfiddle.net/xcPcv/9/
The issue is that opacity applies to all contained (child) elements, not just the element you are applying
opacity
to. A side effect of this is that a further opacity setting will be that fraction of the parent opacity.
In your case you need to do nothing else but move the popup div outside the fadeMe div
<div id="fadeMe"></div>
<div id="center">You have javascript disabled.</div>