I have two divs I want to transition across the screen to make it look like an infinite loop. I have worked with adjusting setTimeouts and setting an event listener (transitionend), but I keep getting a huge gap between the divs. Here is a link to the js fiddle using the event listener. Below is code I used without using the event listener.
Javascript
var boxWrap = $('#one');
var boxWrap2 = $('#two');
boxWrap.addClass('start')
boxWrap2.addClass('start')
setInterval(function () {
boxWrap.removeClass('start')
boxWrap[0].offsetTop
boxWrap.addClass('start')
}, 35000)
setInterval(function () {
boxWrap2.removeClass('start')
boxWrap2[0].offsetTop
boxWrap2.addClass('start')
}, 35000)
CSS
.boxWrapper.start {
transition: right linear 35s;
right: calc(-144vmin - 80vmin - 200vmin);
}
.boxWrapper.boxWrapper2.start {
transform: translateX(-224vmin);
transition: right linear 35s;
right: calc(-144vmin - 80vmin - 200vmin);
}
Tell me if there is anything you need.
Related
Working on an Angular 14 application, I want all context menu pop-ups to be only 80% of their size, as the default size is too large and clunky in the context of the data presented in the application. This is working fine to accomplish this:
.cdk-overlay-pane .mat-menu-panel {
transform: scale(0.8);
transform-origin: top left;
}
However, the problem is that the context menu appears at full size for a moment, and then the transform takes effect and it "snaps" to the desired size. I don't want it to appear until the transform is complete. Anybody know how to accomplish this?
I was able to do this by defaulting mat-menu-panel to visibility: hidden, then showing it a fraction of a second after the menu is opened. (I don't like using javascript like this within the context of an Angular app, but I don't know any other way.)
Default CSS:
.mat-menu-panel {
visibility:hidden;
}
Showing after menu is opened:
public onContextMenu(event: MouseEvent, item: any) {
event.preventDefault();
this.contextMenuPosition.x = event.clientX + 'px';
this.contextMenuPosition.y = event.clientY + 'px';
this.matMenuTrigger.menuData = { 'item': item };
this.matMenuTrigger.menuOpened.subscribe(() => {
setTimeout(() => {
const overlayPanes = document.getElementsByClassName('mat-menu-panel') as HTMLCollectionOf<HTMLElement>;
Array.from(overlayPanes).forEach((el) => {
el.style.visibility = 'visible';
});
}, 200);
});
this.matMenuTrigger.openMenu();
}
I want to create a smooth transition between 2 images with a legend.
The images come from an object-array of images.
Because works only on single tags and components, I've created a component to define the image+legend.
<transition>
<home-image :slide="slide" :key="slide"></home-image>
</transition>
The classes I define are like this
.v-enter-active,
.v-leave-active {
transition: opacity 2s ease-in-out;
}
.v-leave,
.v-enter-to {
opacity: 1;
}
.v-enter,
.v-leave-to {
opacity: 0;
}
The new image is returned by a method
updateSlide() {
this.slide = this.entries[ Math.floor( Math.random() * this.entries.length ) ];
}
where entries is my array defined in data
this.slide is updated in regular intervals, every 10seconds like this, which is defined in the created() section
this.updateSlide();
this.uSlide = setInterval( this.updateSlide, 10000);
The code works, in the sense that a new image is loaded in this.slide every 10 seconds.
However, the transitions work only "half-way".
There is no transition fading out: the "old image" disappears and makes way for the new image fading in.
However, what I'd like is a smooth transition from one to the other.
I've tried more than a couple of ideas including using mode="out-in" and "in-out" but nothing works as I want.
What am I overlooking?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
How can I use CSS animation to move an image (in this case a GIF) from left (outside the screen) to right (outside the screen)?
The only thing that is important to me is that you can choose the speed, the animation will always repeat AND you can define how long you want to wait before the next repetition.
NO EaseIn or EaseOut, just a normal animation.
I have done some research on this, but have not found a satisfying solution anywhere.
Since the delay part of an animation is used only to determine when an element should begin the animation, it cannot be reused after each iteration of the animation (only the first time). Therefore, we'll need JavaScript to do what you're asking. Instead of the delay being included in the CSS, it will now be included in the JavaScript.
We trigger the animation to begin when the page first loads listening to the DOMContentLoaded event.
We listen for the animation ending using the animationend event. When this happens, we set the animation to none and then back to an empty string. This will essentially restart the animation.
The code for the animationend handler, as well as the code for the DOMContentLoaded handler, both occur within setTimeout calls, with the delay assigned to a variable.
const img = document.querySelector(".my-img");
const delay = 2000; // ms=
const handleDOMReady = () => {
window.setTimeout(() => {
img.classList.add("on");
}, delay);
}
const handleAnimationEnd = () => {
img.style.animation = "none"
window.setTimeout(() => {
img.style.animation = "";
}, delay)
}
img.addEventListener("animationend", handleAnimationEnd);
window.addEventListener("DOMContentLoaded", handleDOMReady);
html, body {
padding: 0;
margin: 0;
}
.my-img {
transform: translateX(-100%);
}
.my-img.on {
--speed: 2s;
animation: move var(--speed) linear forwards;
}
#keyframes move {
to {
transform: translateX(100vw);
}
}
<img class="my-img" src="http://placekitten.com/200/300" alt="cat">
jsFiddle
I've got this code:
$(function(){
$('#gallery').click(function(){
$('.overlay').fadeIn(500);
$('#infographic').delay(800).fadeIn(200);
});
});
Now when I click $('#gallery') again, I want the above to reverse.
Anyone??
This should work:
$(function(){
$('#gallery').click(function(){
$('.overlay').toggle(500);
$('#infographic').delay(800).toggle(200);
});
});
http://api.jquery.com/toggle/
Since your fade-in has the infographic starting 300ms after the overlay finishes, I've reversed the steps and modified the delay so that the overlay will fade out 300ms after the infographic does. The following code will exactly reverse your fade-in.
$(function(){
$('#gallery').click(function(){
// Check the current state - are things visible? If yes, fade out
if ($('#inforgraphic').is(':visible')) {
$('#infographic').fadeOut(200);
$('.overlay').delay(500).fadeOut(500);
// If not visible, fade in
} else {
$('.overlay').fadeIn(500);
$('#infographic').delay(800).fadeIn(200);
}
});
});
I have a div like this:
<div class="row">
<alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
I create the alerts in angularjs (and I'm using bootstrap), and while this works great, the visual effect is kind of uncool. As alerts are added to the div, all page content is shoved ungracefully down to make room for the new alert.
I would like to animate the movement so that it is at least smooth. But I don't want to use jQuery. I've played with the CSS3 transitions, but can't seem to get them to work smoothly.
Can I do this where the trigger is a change in div height? How?
you can do it with directives in their link function. i think you wont mind about so small piece on jquery code
myModule.directive('animateRight', function () {
var linker = function (scope, element, attrs) {
var right = function() {
$(this).animate({
{"height": "800px"},
"fast");
})
}
element.on('click', right);
};
return {
restrict:'A',
link:linker
}
})
<div animate-right class="box"></div>
Ok, so I don't like to answer my own question, but this seems like the way to do it...
I used AngularJS 1.2, along with the new ngAnimate module. You need to add angular-animate.js, and reference the animate module, so at the end here's what my modules looked like:
var app = angular.module('tracker', ['$strap.directives', 'ui.bootstrap', 'ngRoute', 'ngAnimate']);
After that, its super simple, and very much CSS3 animations. My alert line ended up with a class repeat-item:
<alert class="repeat-item" type="alert.type" data-ng-repeat="alert in alerts" close="closeAlert($index)">{{alert.msg}}</alert>
And I added some CSS to target that class with the angularjs triggers:
.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition: 0.2s linear all;
-moz-transition: 0.2s linear all;
-o-transition: 0.2s linear all;
transition: 0.2s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity: 0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
opacity: 1;
}
And voila a nice fade in and out animation.
This page really explains very well how to do it. Cheers to Michael Benford for the great link.