I facing difficulty finding what causing the problem. And I appreciate your help. In the website I have set the html text direction right to left because the website in Arabic. And there is css animation which all are running normal. Except in the following condition:
When the html text direction is right to left and I'm browsing the website on mobile. Or using the device toggle option in google chrome.
When the page loads, it loads on the div which is set -100% to the left, instead of loading on the content and the div which is -100% comes to the mid on the page. And that gives the illusion that the whole web page is coming from the right. I don't know how to solve this for mobile devices I'm thinking of viewports but I couldn't find a solution.
Here is the code for the webpage
<!DOCTYPE html>
<html dir="rtl" lang="ar" >
<head>
<meta charset="UTF-8">
<title>RTL TEST SITE</title>
<style type="text/css">
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
#keyframes fadeInLeft {
from {
transform: translate3d(-100%, 0, 0);
}
to {
transform: none;
}
}
#keyframes fadeInRight {
from {
transform: translate3d(100%, 0, 0);
}
to {
transform: none;
}
}
</style>
</head>
<body class="rtl" >
<div style="background:green;text-align:center;">
<a>عنوان الصفحة</a>
</div>
<div class="fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
<h2>كلمات باللغة العربية تأتي من جهة اليسار</h2>
</div>
<p>فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة باللغة العربي بين الكلمات المتحركة لتبين المشكلة ,,,فقرة مكتوبة </p>
<div class="fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;">
<h2>كلمات باللغة العربية تأتي من جهة اليمين</h2>
</div>
</body>
</html>
Here is a link for the webpage
http://lotav.com/right2left.html
Please try it out on mobile device or use google chrome with setting the device toggle into mobile device and it will misbehave. And compare it with running the site on PC browser which will work normal.
And two pictures to explain what I mean. The first one when it loads normally on the PC and the second one when it loads abnormally on the mobile. and
I don't exactly know what is going on your website, I saw it so I tried using your code and apply it on the a default button and it worked without any problems. I added the class only.
.fade-in-left {
animation: fadeInLeft ease 1s;
-webkit-animation: fadeInLeft ease 1s;
-moz-animation: fadeInLeft ease 1s;
-o-animation: fadeInLeft ease 1s;
-ms-animation: fadeInLeft ease 1s;
}
https://jsfiddle.net/HiramRamirez/6qy9e52d/
Hopefully this may help you.
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 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;
}
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>
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.