I am using popper js to create an action menu.
this.popper = new Popper(originElement, dropdownElement, {,
removeOnDestroy: true,
modifiers: {
applyStyle: {
onLoad: () => {
dropdownElement.style.display = "block";
}
}
}
});
My problem is that it just shows the dropdown without animation. I can't find anything in the docs about animation. How can I add animation?
The reason why there is no "animation" is that you transition from display: none; to display: block.
There is no way to animate the change between these two states, but there are different ways to approach this problem. You could for instance animate opacity: 0 to opacity: 1 which would make the dropdown fade in / fade out.
My personal favourite is animating max-height. To do this: Set your menu's CSS like this:
.yourclassname {
max-height:0;
overflow:hidden; /* Like this your content will not be visible until the height is high enough */
transition: max-height ease .5s; /* Animation */
}
In JS all you need to do is set the max height to something like 1000px or less/more and your animation is done.
Related
This is my code
// turn a pie into a nav menu (make it smaller)
// this is triggered when a pie should be turned into a nav
function beNavPie(pie) {
$(pie).css("transform", "scale(0.3)");
$(pie).css("transform-origin", "initial");
}
// turn a nav menu into a pie (revert it to original size)
// this is triggered when the nav is clicked
function pieFromNav(nav) {
$(nav).css("transform", "scale(1)");
$(nav).css("transform-origin", "initial");
}
As you can see in the gif below, it's working fine.
But the turn is:
Every pie's first time to be a nav menu(a small one), the transition
path curves, after that, it's transition will not already have path curves. here is jsfiddle: https://jsfiddle.net/q3jytbkr/
here is sample
A longer look
Problem is you are transitioning all properties, including transform-origin. Change your CSS from
.show-pie {
visibility: visible;
transition: .3s;
}
to
.show-pie {
visibility: visible;
transition: transform .3s;
}
https://jsfiddle.net/q3jytbkr/1/
Alternatively, you could just set the transform-origin to initial before you start changing the scale.
As jQuery.fadeIn is not very smooth on mobile devices I try to use CSS but it doesn't work as expected. How to create a smooth CSS animation using Javascript?
In general this is what I'm trying:
$('div')
.css('opacity', 0) // at first, set it transparent
.css('display', 'block') // make it appear
.css('transition', 'opacity 1000ms linear') // set a transition
.css('opacity', 1); // let it fade in
https://jsfiddle.net/8xa89y04/
EDIT1:
I'm not searching a solution using static CSS classes. The point is: I need to set this dynamically in Javascript code - a replacement for jQuerys fadeIn() for example.
Your logic isn't quite right. Firstly you cannot animate display, so to achieve what you require the element has to always be rendered in the DOM (ie. anything but display: none). Secondly, the transition property should be placed within the CSS styling itself. Finally you can make this much more simple by setting all the rules in CSS classes and just turning the class on/off. Try this:
div {
position: absolute;
width: 100px;
height: 100px;
background-color: black;
opacity: 0;
transition: opacity 1000ms linear;
}
.foo {
opacity: 1;
}
$('div').addClass('foo');
Working example
Use this code.
CSS
div {
width: 100px;
height: 100px;
background-color: black;
transition:opacity 2s;
}
JavaScript
$('div').hover(function(){
$(this).css('opacity','0');
})
Without using CSS properly, you are going the long way about it. You'll need to emulate what you would normally do in CSS, using JavaScript, so you'll be setting all your CSS properties, transitions etc, then applying them with js.
I can't personally see any benefit in doing this. Using actual CSS would be cleaner, more efficient, more maintainable, and simply a plain better solution to what you need.
I think this is what you are looking for.
$('div').css({"display":"block", "opacity":"0"}) //Make div visible and opacity as "0"
$('div').animate({opacity :1}, 1000); //Animate div to opacity "1"
Take a look at this Demo
Found the cause here: CSS transitions do not work when assigned trough JavaScript
To give this attention I need to give the browser some time - or better: a working slot to activate the transition as the time seems not to be a problem.
The following code cuts the process in two by using setTimeout()... and it works!
var div = $('div');
// first process
div
.css('opacity', 0) // initial opacity
.css('display', 'block') // make it appear (but still transparent)
.css('transition', 'opacity 1s linear'); // set up a transition for opacity
// break - start the transition in a new "thread" by using setTimeout()
window.setTimeout(function(){
div.css('opacity', 1); // start fade in
}, 1); // on my desktop browser only 1ms is enough but this
// may depend on the device performance
// maybe we need a bigger timeout on mobile devices
I have a function that changes the css of a class and I want that function to be called anytime that the route changes. I also want this logic to be placed inside the ApplicationView so it will be called anywhere at anytime the route changes.
The class that is being altered by the function (we'll call that class .float-right-col) is created once on every .hbs template in my app.
<div class="float-right-col">
</div>
The pseudo code of what I want
Whenever we are transitioned to a new route {
Set the css of float-right-col to this by toggle classes with overriding attributes
}
Information that I left out for simplicity's sake (optional) AKA The Big Picture:
Eventually the pseudo code mentioned above will have another condition && that requires the screen to be > 800px.
Whenever we are transitioned to a new route {
check if the screen size is below 800px & if it is {
Set the css of float-right-col to this
}
}
Ideally the css would just know the screen size and adjust the css before the page loads.
With this pseudo code above, the page will load with the default css, and then the function will be called which makes float-right-col transition into a new position.
To toggle the css of this element i add and remove these two classes to .float-right-col.
.openCol {
position:absolute;
right: 0px;
transition: all .2s ease 0s;
}
.closeCol {
position:fixed;
right: -290px;
transition: all .2s ease 0s;
}
I've also tried using .css()
Finally, I've tried media queries, but those seem to only work on the initial load of the first page
#media screen and (max-width: 800px) {
.float-right-col {
position: fixed !important;
right: -290px;
}
}
You could observe the currentPath in the ApplicationController and react on any changes.
App.ApplicationController = Ember.Controller.extend({
currentPathChanged: function() {
console.log(this.get('currentPath'));
}.observes('currentPath')
});
i have multiple images, on hover on particular image i want to apply on that image only, it should not effect on other image.
More Explanation:
In this example(http://codepen.io/anon/pen/AnsqI), suppose i have multiple images & want to apply the certain effect on only on that image where i hove my mouse.
I am using class attribute...
<script>
$(function() {
//For grid view hover effect
$('.grid_content').hide()
$('.grid_container').hover(
// Over
function() {
$('.grid_content').fadeIn();
}
,
// Out
function() {
$('.grid_content').fadeOut();
}
);
//--js for grid view hover effect ends here
});
</script>
Something i have to apply like $this , i tried like($this.$('.grid_content').fadeOut();)but it did not work.
Somebody please help me.
Use this:
$('.container').hover(function(){
$('.content',this).fadeToggle();
});
Check this Demo http://codepen.io/anon/pen/BxbID
You could consider using CSS and the opacity attribute (or display). You could progressively enhance the hover effect with CSS3's transition property as well. There isn't necessarily a need for JS here, and I only added five lines of CSS (unprefixed) to achieve the same effect.
.content {
width: 100%;
height: 100%;
background: rgb(255,255,255,0.9);
padding: 5px 15px 10px 15px;
box-sizing: border-box;
opacity: 0;
transition: opacity .2s linear; /* CSS3 progressive enhancement */
}
.content:hover {
opacity: 1;
}
Depending on how you organize your HTML, you may need to make modifications, but the concept is the same.
Check out the demo: http://jsfiddle.net/NeEuP/1/
There are 2 ways to do this. You can either reference it using the this javascript keyword and surrounding it in a jQuery function:
$('.grid_container').hover(function(){
$(this).fadeIn();
, function(){
$(this).fadeOut();
});
Or you can:
$('.grid_container').hover(function(e){
$(e.currentTarget).fadeIn();
, function(e){
$(e.currentTarget)$(this).fadeOut();
});
... basically you're getting element through the event object. I personally prefer this method, because it's more flexible it doesn't depend on the actual scope (this depends on scope).
I found this code:
$('li input:checked').click(function() {
$(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});
It's working well, when a click the element for the first time. It fades the background color, but when I click it again, it delays for 1000 ms, and then flashes the other background color. I want it animated when it has the class, and when not, not only when clicked for the first time.
This is easy with CSS transitions:
JS:
$('li input:checked').click(function() {
$(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});
CSS:
.uncheckedBoxBGColor {
background-color: orange;
/*other properties*/
transition: background-color .3s;
}
This will add the effect whenever the class is turned ON, but when it doesn't have that class then there are no transitions defined. So instead, you can turn on this transition for ALL <LI> elements like so:
CSS:
li { transition: background-color .3s; }
OR for all <INPUT> elements following an <LI><INPUT> combination:
li input { transition: background-color .3s; }
You get the idea of it..
The jquery.toggleClass function isn't made for fading anyhow. See http://api.jquery.com/toggleClass/ for more details.
If you want to fade in/out the background color, try using the CSS3 transition feature like explained at Mozilla's side: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions.
Maybe because you are using "input:checked"
try using
$('li input[type=checkbox]').click(function () {
$(this).parent().parent().toggleClass("uncheckedBoxBGColor", 1000);
});
this is working for me.