I have written a simple function .onload where a 'p' and 'h1' tag go from opacity:0; to opacity 1;.
The animation is fine and everything but sometimes while the animation is happening, it looks like the p and h1 tags have a background-color set to gray while the animation is happening and then it disappears once the animation ends and this only occurs on firefox.
see animation bug here
const abouth1 = document.querySelector(".about-h1");
const aboutp = document.querySelector(".about-p");
const logo = document.querySelector(".logo");
function fadeFunction() {
abouth1.classList.add("about-show-h1");
aboutp.classList.add("about-show-p");
logo.classList.add("logo-show");
}
window.onload = fadeFunction();
.about-h1 {
opacity: 0;
transition: 1.5s;
transform: translateX(45%);
}
.about-p {
margin-top: 1.25em;
font-size: 1rem;
opacity: 0;
transition: 2s;
transform: translateX(-65%);
}
.about-show-p {
opacity: 1;
transform: translateX(0);
}
.about-show-h1 {
opacity: 1;
transform: translateX(0);
}
<h1 class="about-h1">
My name is Drinos Shala, <br />
and I am a senior software developer who <br />
specializes in front-end technologies.
</h1>
<p class="about-p">
My job is to ensure your website is pixel perfect in every
dimension,
<br />
years of working in this field have granted me the experience needed
<br />
to deploy every website I start in great success! <br />Let's get in
touch so we can get started on your dream website for your dream
business.
</p>
If you have any third party firefox extensions try to remove them, looks fine on my Firefox browser and adding a night-mode extension (even though turned off) caused this bug.
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>
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 am trying to use the animate.css library for nuxt page transtions but it doesnt seem to be working. I added the animate.css to the nuxt.config.js and loads in fine. But when try to use one of the transition names, nothing happens.
Tried:
transition: 'bounceInUp'
and also:
transition: {name:'bounceInUp',type:'animation'}
no animations (or errors) on page load by either.
EDIT:
Tried adding in custom active classes. Still nothing.
Full Page Code:
<template>
<v-layout>
<v-flex class="text-center">
<blockquote class="blockquote">
Testing amination page
</blockquote>
</v-flex>
</v-layout>
</template>
<script>
export default {
transition: {name:'bc',type:'animation'}
}
</script>
<style>
.bc-enter-active {
-webkit-animation-name: bounceInUp;
animation-name: bounceInUp
}
.bc-leave-active {
-webkit-animation-name: bounceInUp;
animation-name: bounceOutUp
}
</style>
Provided you already have animate.css installed.
nuxt.config.js
css: ['animate.css/animate.compat.css'],
Vue file. Just a minor tweak with what you already have.
<script>
export default {
transition: {name:'bc'}
}
</script>
<style>
.bc-enter-active {
animation: bounceInUp 5s;
}
.bc-leave-active {
animation: bounceOutUp 5s;
}
</style>
This helped me.
You'd need to define -enter-active and -leave-active classes for the same animation name in CSS. Such as:
. bounceInUp-enter-active {
animation: bounceInUp .8s;
}
. bounceInUp-leave-active {
animation: bounceInUp .5s;
}
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;
}
First of all, have a look at my div.
<div data-category="news" class="element news isotope-item loadimg" style="position: absolute; opacity: 1; -moz-transform: scale(1); left: 20px; top: 20px; height: auto; overflow: visible; width: auto; background-color: rgb(0, 0, 0);">
<div id="1" class="load_cont"></div>
<p class="number">1</p>
<div class="element_content">
<div class="thumb">
<img src="assets/website/news2.jpg" id="myImage">
<img style="display: none;" src="assets/ajax-loader.gif" id="prg1">
<div class="date_entry"> 14 may 2011</div>
<div class="title news">TEST 1</div>
</div>
</div>
</div>
When I hover over the div, the img, inside thumb, is supposed to disappear and reveal the div's background.
.element_content .thumb:hover img {
opacity:.0; /*FF/OPERA/Chrome*/
filter: alpha(opacity=0); /*IE 5-7*/
-webkit-transition-duration: 0.1s;
-moz-transition-duration: 0.1s;
transition-duration: 0.1s;
}
Now comes the jquery part, which is basically, if I click on the div, it would load-in content via ajax.The thing is, the ajax preloader and css changes work pretty well in Firefox but doesn't show up at all in IE and Chrome, unless I remove the ajax part.
$('#container').find('.element').click(function(){
if($(this).hasClass('large')){
return ;
}
var url="item_detail.php?";
var code=$(this).children().first().attr("id");
//the portion below this point works well in FF but not in IE or Chrome
$("#"+code).append("<img style='background-color:transparent;' src='assets/ajax-loader.gif'>");
$("#"+code).css({
"position":"absolute",
"top":""+(($("#"+code).parent().height()/2)-27)+"px",
"left":""+(($("#"+code).parent().width()/2)-27)+"px",
"z-index":"2",
});
var e_code = $("#"+code);
var e_cont = $('.element_content',this);
e_cont.css({"opacity":"0.3","filter":"alpha(opacity = 30)","zoom":"1"});
e_cont.find('.thumb img').css({"opacity":"1","filter":"alpha(opacity = 100)","zoom":"1"});
var url="item_detail.php?code="+code;
//If I turn off everything below this point, the preloader appears correctly in chrome and IE, otherwise it seems, the css changes above and the preloader thing don't have any effect in browsers other than firefox.
var httpRequest = new XMLHttpRequest();
httpRequest.open('POST', url, false);
httpRequest.send(); // this blocks as request is synchronous
if (httpRequest.status == 200) {
e_code.css({
"position":"static"
});
e_cont.html('');
e_cont.css({"opacity":"1","filter":"alpha(opacity = 100)","zoom":"1"});
$previousLargeItem.html(oldhtml);
$previousLargeItem.css({'height':'auto','width':'auto'});
var res=httpRequest.responseText;
$('#'+code).html(res);
}
});
The actual problem turned out to be the asynch false thing which froze chrome but for some reason continued to run code in firefox. I solved it by using asynch true and moving the later code in a success event call.
I don't know what You exactly want to do.
But try this code, maybe it can help You out:
http://jsbin.com/iserac/11
The transition works. Just make the interval bigger.
.element_content .thumb img {
opacity:1;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.element_content .thumb:hover img {
opacity:0; /*FF/OPERA/Chrome*/
filter: alpha(opacity=0); /*IE 5-7*/
}
Try using jQuery ajax api for ajax calls.