I have a troublesome task. Image should be hidden and button showed by default. I want to show image and hide button, but when one animation ends, secound should start. transition should peroid 1 second. How to make it?
All code:
https://jsfiddle.net/169vuuk8/
HTML code:
<div class="showSingle" itemprop="1">
<img src="https://img.thegearpage.net/board/data/avatars/m/47/47608.jpg?1487188345" alt="logo">
<button class="button">button </button>
</div>
Looks like you just need transition-delay css property for second animation: https://developer.mozilla.org/en/docs/Web/CSS/transition-delay
You can either use transitionend event in js, but it is not really needed here: https://developer.mozilla.org/en/docs/Web/Events/transitionend
Not sure what you need exactly but below the image fades in the first second and the button out after 2 seconds delay.
.showSingle img {
opacity: 0;
animation: fadeInImage 1s ease-out forwards;
}
.showSingle button {
opacity: 1;
animation: fadeOutButton 1s ease-out 2s forwards;}
#keyframes fadeInImage {
to {
opacity: 1
}
}
#keyframes fadeOutButton {
to {
opacity: 0
}
}
<div class="showSingle" itemprop="1">
<img src="https://img.thegearpage.net/board/data/avatars/m/47/47608.jpg?1487188345" alt="logo">
<button class="button">button </button>
</div>
Related
I've been experimenting with HTMX recently and I cant seem to find a way to apply a transition to a target element. I have a form that submits a GET request and returns a table.
<form class="mt-3" hx-get="/data/statement/AJAX" hx-target="#statementAJAX" >
It basically returns a div containing the table like this:
<div id="statementAJAX" class="fade-in">
</div>
the CSS for the div is the following:
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Now the css transition works when i first load the page but when I execute the AJAX request nothing happens.
I tried apllying style="opacity:0" to the form but obviously it applies only to the form and not the target...
Any idea how to apply the transition to the target element?
What you have there works for me. Are you trying to replace the entire table or add to the table?
This works for me using your CSS and hx-swap="outerHTML" to replace the table.
<a href="#" id="test" hx-get="/load.html" hx-target="#table" hx-trigger="click" hx-swap="outerHTML">
Submit
</a>
<div id="table" class="fade-in"></div>
load.html
<div id="table" class="fade-in">
table content
</div>
I would like to ask for help with implementing my idea: as soon as image1 finishes its transition, the "anim" animation will start.
What i tried:
I tried make it with "animation-delay" but this is not my option - the point is that "animation-delay" adds a time before execution after a mouse click, I need animation to start immediately after the end of the transition. If it's not clear, I'll put it more simply: when you click and little bit hold many times image1, the transition does not start over, but the "animation-delay" starts over after last mouse click.
.image2{
top:0px;
left:300px;
position: absolute;
}
.image1{
transition: transform 2s;
}
.image1:active{
transform: scale(0.6);
}
.image1:active + .image2{
animation: anim 2s;
}
#keyframes anim {
0% {top:0%;}
100% {top:20%;}
}
<div class="test">
<img class="image1" src="http://www.clker.com/cliparts/2/p/6/C/i/q/run-button-md.png">
<img class="image2" src="https://lh3.googleusercontent.com/gti0MtNnT1rEQOuo9mfPfegw-qRGLI1MS3QqamM243fVcIXWqJHmlwldYpBJAwsd3tkQtIfvBqernahhDjuzSw=s200">
</div>
Thanks for any help!
Assuming a bit of JS is OK, you can sense when the transition of image1 ends and then start the animation of image2. But you also need to sense the end of this animation so you can reset it and next time it will play again (otherwise CSS thinks it's done it and won't replay it).
const test = document.querySelector('.test');
const image1 = document.querySelector('.image1');
const image2 = document.querySelector('.image2');
image1.addEventListener('transitionend', function () {
image2.classList.add('active');
});
image2.addEventListener('animationend', function () {
image2.classList.remove('active');
});
.image2{
top:0px;
left:300px;
position: absolute;
}
.image1{
transition: transform 2s;
}
.image1:active{
transform: scale(0.6);
}
.image2.active{
animation: anim 2s;
}
#keyframes anim {
0% {top:0%;}
100% {top:20%;}
}
<div class="test">
<img class="image1" src="http://www.clker.com/cliparts/2/p/6/C/i/q/run-button-md.png">
<img class="image2" src="https://lh3.googleusercontent.com/gti0MtNnT1rEQOuo9mfPfegw-qRGLI1MS3QqamM243fVcIXWqJHmlwldYpBJAwsd3tkQtIfvBqernahhDjuzSw=s200">
</div>
You can listen for the transitionend event and then add a class that starts the keyframe animation.
CSS
.animationclass {
animation: anim 2s;
}
JS
const img1 = document.querySelector('.image1');
img1.addEventListener('transitionend', () => {
console.log('Transition ended, add keyframe animation')
img1.classList.add("animationclass")
});
Recently I have implemented some animations but I am having some problems when the animation ends. I have a div structure for responsiveness, that shows a menu button when the screen size is smaller than X.
When someone clicks on the menu button a left side bar, which is default set to display:none, is being shown by removing the display: none property immediately and then adding an animation class, this all works fine.
However, when the sidebar is collapsed again (by clicking on a close button), a new animation (for removing the menu) is being added, when this animation ends I need to set the display back to display:none (I don't want the sidebar take up any space).
In the current situation I accomplished this by setting some boolean variables that add display:none on false and removes it on true. My animation takes up to 300MS so I added a Task.Delay of 300MS to set the boolean. Sadly this doesn't create a perfect 'flow', you can see the screen hiccup because the setting of the display:none happens just a few MS to late. Of course I can decrease the Task.Delay to 290MS~ but this isn't a great solution.
Any ideas how I can accomplish this using Blazor?
Below the code:
HTML:
<!-- The mobile side bar, display: none default on screen sizes > X -->
<div class="md:hidden" style=#mobileSideBarDisplay>
<div class="fixed inset-0 flex z-40">
<! this sets the opacity of tyhe space to the right (grayed out) -->
<div class="fixed inset-0 #sidebarOverlayAnimation">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<!-- the actual side bar with it's buttons -->
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800 #sidebarMenuAnimation">
<!-- Close button with which the sidebar menu can be closed -->
<button class=".." aria-label="Close sidebar" #onclick="ToggleSidebar"></button>
... Left out for readability
</div>
</div>
</div>
<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:flex-shrink-0">
.. Left out for readability
</div>
<!-- menu button div which becomes visible at screensize < X
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<!-- Menu button with which the sidebar menu can be opened -->
<button class=".. md:hidden" aria-label="Open sidebar" #onclick="ToggleSidebar">
.. Left out for readability
</div>
C# backend code:
#code {
// used to set display: none; (or empty)
private bool showMobileSideBar = false;
// Used to show / toggle animations
private bool showMobileSideBarAnimation = false;
// toggle animation and display classes
private string mobileSideBarDisplay => showMobileSideBar ? "" : "display: none;";
private string sidebarOverlayAnimation => showMobileSideBarAnimation ? "sidebar-overlay-animation-entering" : "sidebar-overlay-animation-leaving";
private string sidebarMenuAnimation => showMobileSideBarAnimation ? "sidebar-menu-animation-entering" : "sidebar-menu-animation-leaving";
// Function to display entering or leaving animation depending on the boolean value)
private async Task ToggleSidebar()
{
showMobileSideBarAnimation = !showMobileSideBarAnimation;
if (showMobileSideBar == true) // only delay when we need to set div to display: none;
{
await Task.Delay(300); // this works kinda clunky now
}
showMobileSideBar = !showMobileSideBar;
}
}
The CSS / animations:
/*
Animations for setting the right-space opacity (when the sidebar is shown / hidden)
*/
.sidebar-overlay-animation-entering {
animation-name: sidebar-overlay-entering;
animation-duration: 300ms;
animation-timing-function: linear;
}
#keyframes sidebar-overlay-entering {
from { opacity: 0; }
to { opacity: 1; }
}
.sidebar-overlay-animation-leaving {
animation-name: sidebar-overlay-leaving;
animation-duration: 300ms;
animation-timing-function: linear;
}
#keyframes sidebar-overlay-leaving {
from { opacity: 1; }
to { opacity: 0; }
}
/*
Animations for displaying the sidebar (in- and out)
*/
.sidebar-menu-animation-entering {
animation-name: sidebar-menu-entering;
animation-duration: 300ms;
animation-timing-function: ease-in-out;
}
#keyframes sidebar-menu-entering {
from { transform: translateX(-100%); }
to { transform: translateX(0); }
}
.sidebar-menu-animation-leaving {
animation-name: sidebar-menu-leaving;
animation-duration: 300ms;
animation-timing-function: ease-in-out;
}
#keyframes sidebar-menu-leaving {
from { transform: translateX(0); }
to { transform: translateX(-100%); }
}
P.S. I tried using https://github.com/dazinator/BlazorDeferredRemove but I cant get it this to work. There is also not an example using animations (only transition with visibility) or using display: none; (But perhaps the library can work if someone could give a few pointers)
I have a vuetify card like this :
<v-card class="news__card">
<v-card-media
:src="ip.images[0].url"
height="150px"
#click="onLoadNews(ip.id)"
/>
<v-card-title primary-title #click="onLoadNews(ip.id)">
<div class="news__card__down">
<h3 class="subheading font-weight-medium">{{ ip.headline }}</h3>
<div class="published">{{ ip.date }}</span> </div>
</div>
</v-card-title>
</v-card>
And i want to give an effect hover the card that apply a transform on the background image. It works when i hover .v-card__media__background with this :
.v-card__media__background:hover {
position: relative;
animation: scaleMe 500ms ease-in-out 0s forwards;
}
#keyframes scaleMe {
100% {
transform: scale(1.2);
}
}
but i would like to have this effect when hovering everywhere in the card.
You can use the following solution to solve your problem:
.news__card:hover .v-card__media__background {
// your animation...
}
I was trying to do a page fade in when my app initially loads using appear; however, I am already using a routing css animation that does a fade in and fade out when going from page to page, but it still leaves me with an abrupt display of my page when it initially loads. So far, my attempts to add another transition tag around the routing transition in a outer nested way has failed. It still loads with an abrupt display of page. Any suggestions?
<template>
<div id="app">
<v-app>
<main>
<transition name="appearPageFadeIn" appear><!-- new appear tag -->
<cq-nav-mobile></cq-nav-mobile>
<cq-nav-desktop></cq-nav-desktop>
<transition name="interPageFadeOutIn" mode="out-in">
<router-view></router-view>
</transition>
<cq-footer></cq-footer>
</transition>
</main>
</v-app>
</div>
</template>
<!-- CSS -->
/* appear page animation */
.appearPageFadeIn-appear {
opacity: 0;
}
.appearPageFadeIn-appear-active {
transition: opacity 1s;
}
/* inter page routing animation */
.interPageFadeOutIn-enter {
opacity: 0;
}
.interPageFadeOutIn-enter-active {
transition: opacity 1s;
}
.interPageFadeOutIn-leave {
opacity: 1; //default
}
.interPageFadeOutIn-leave-active {
transition: opacity 1s;
opacity: 0;
}