When one image changes into another each time it moves a bit bottom and right and comes back after the animation until to the next image change. It's simple slideshow. Here is the code:
<div>
<transition-group name='fade' tag='div'>
<div v-for="n in [currentN]" :key='n'>
<img :src="Image" />
</div>
</transition-group>
</div>
CSS
.fade-enter-active,
.fade-leave-active {
transition: all 0.8s ease;
overflow: hidden;
visibility: visible;
opacity: 1;
position: absolute;
width:100%
}
.fade-enter,
.fade-leave-to {
opacity: 0;
visibility: hidden;
width:100%
}
img {
height:600px;
width:100%
}
What is wrong and how can fix that image change animation issue and keep image full width of the screen and height 600px all the time without changing its position?
I found it in jsfiddle few days ago and tried to make changes on it.
Recommended Solution
Giving static number for the width of img will solve the problem. Change from 100% to your preferred width in px, like this:
img{
height:200px;
width:300px;
}
Alternate solution:
body{
margin:0px;
}
This prevents your image to flow off the grid and enable you to use 100% on the image tag as you did initially. Example: https://jsfiddle.net/L5y2hqua/
Code Snippet
new Vue({
el: 'image-slider',
data: {
images: ['http://i.imgur.com/vYdoAKu.jpg', 'http://i.imgur.com/PUD9HQL.jpg', 'http://i.imgur.com/Lfv18Sb.jpg', 'http://i.imgur.com/tmVJtna.jpg', 'http://i.imgur.com/ZfFAkWZ.jpg'],
currentNumber: 0,
timer: null
},
mounted: function () {
this.startRotation();
},
methods: {
startRotation: function() {
this.timer = setInterval(this.next, 3000);
},
next: function() {
this.currentNumber += 1
},
prev: function() {
this.currentNumber -= 1
}
},
computed: {
currentImage: function() {
return this.images[Math.abs(this.currentNumber) % this.images.length];
}
}
});
.fade-enter-active,
.fade-leave-active {
transition: all 0.8s ease;
overflow: hidden;
visibility: visible;
opacity: 1;
position: absolute;
width:100%;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
visibility: hidden;
width:100%;
}
img {
height:200px;
width:300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>
<body>
<div class="slider-wrapper">
<image-slider>
<transition-group name='fade' tag='div'>
<div
v-for="number in [currentNumber]"
:key='number'
>
<img
:src="currentImage"
/>
</div>
</transition-group>
</image-slider>
</div>
</body>
Related
I have a tab and once I click it the tab fades in. The content gets loaded in with AJAX. After the animation is done I want to load in the content. Right now the content is loading in immediately when I click the button. I tried toggleClass with delay but it didn't work.
How can I delay the content from being loaded in?
This is the HTML :
$("#button-1").on("click", function() {
$(".hidden-content-1", 2000).toggleClass("show-hidden-content", 2000);
$(".main-page-content-1", 2000).toggleClass("hide-shown-content", 2000);
})
#modal-1 {
width: 33.33%;
height: 100vh;
background-color: green;
left: 0;
top: 0;
}
.modals {
transition-timing-function: ease-out;
transition-duration: 1000ms;
position: absolute;
}
.active {
width: 100vw !important;
height: 100vh !important;
}
.show-hidden-content {
display: block !important;
}
.hidden-content-1 {
display: none;
}
.hide-shown-content {
display: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modal-1" class="modals">
<div class="hidden-content-1">
<h1> TEST </h1>
</div>
<div class="main-page-content-1">
<h1>TEST </h1>
</div>
<a id="button-1" href="template-parts/panel1.php"><input onclick="change1()" type="button" value="See More" id="button-text-1"></input>
</a>
</div>
It seems you are looking something like:
$('#button-1').on('click', function () {
setTimeout(() => {
$('.hidden-content-1').toggleClass('show-hidden-content');
$('.main-page-content-1').toggleClass('hide-shown-content');
}, 2000);
});
You might want to use animation-delay
#target {
animation: fade-in 250ms ease-out 1s 1 normal both running;
}
#keyframes fade-in {
0% {
opacity:0;
} 100% {
opacity:1;
}
}
I have two divs that appear like this:
The idea is that when you close the bottom div (click on the 'X'), it should disappear.
And when you close the top div, it should disappear, and also the bottom div should slide up and take its place.
I'm very new to jQuery, but this is my first attempt:
function initAnnouncements() {
$(document)
// Closes announcement modules
.on('click', 'annoucements-close', function () {
$('announcement-div').hide();
})
}
#keyframes slideInFromRight {
0% {
transform: translateX(100%);
}
.1%{
opacity: 1;
}
100% {
transform: translateX(0);
opacity: 1;
}
}
.announcements-container {
position: fixed;
top: 80px;
right: 20px;
z-index: 1001;
display: flex;
flex-direction: column;
width: 300px;
/* align-items: flex-end; */
}
.announcements-1 {
animation: slideInFromRight 0.4s ease;
opacity: 0;
animation-fill-mode: forwards;
}
.announcements-2 {
/* animation: 0.4s ease-out 0s 1 slideInFromRight; */
animation: slideInFromRight 0.4s ease;
opacity: 0;
animation-fill-mode: forwards;
animation-delay: .4s;
margin-top: 15px;
}
.annoucements-header {
background-color: #1481C3;
color: #ffffff;
font-family: "Proxima Nova Bold";
padding: 7px 10px;
}
.annoucements-close {
position: absolute;
right: 5px;
width: 24px;
height: 36px;
cursor: pointer;
opacity: .85;
}
.annoucements-close:hover {
opacity: 1;
}
.annoucements-close::before,
.annoucements-close::after {
content: '';
width: 24px;
height: 2px;
background: white;
position: absolute;
top: 7px;
left: 0;
}
.annoucements-close::before {
transform: rotate(-45deg);
}
.annoucements-close::after {
transform: rotate(45deg);
}
/*opened or closed*/
.announcement-div-opened {
display: none;
}
.announcement-div.opened .announcement-div-opened {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="announcements-container">
<div class="announcement-div announcements-1">
<div class="annoucements-header">
<span class="annoucement-type-quantity">2 School Announcements</span>
<i class="annoucements-close"></i>
</div>
</div>
<div class="announcement-div announcements-2">
<div class="annoucements-header">
<span class="annoucement-type-quantity">1 Admin Announcement</span>
<i class="annoucements-close"></i>
</div>
</div>
</div>
</body>
As you can see this isn't doing anything. I'm trying to toggle the class from 'open' (display:block) to 'closed' (display:none) when the annoucements-close <i> element is clicked on.
And ideally I would like for the second div to slide up when the top one is closed, but first I'd just like to get either one to disappear.
What's wrong with my code where that's not working as expected?
Link to JSFiddle
There are 2 issues with your code: the click() event is inside the function initAnnouncements that doesn't get called. You could move it outside of this function or call the function. Then you have issues with your selectors: It's
.on('click', '.annoucements-close', function () {
$('.announcement-div').hide();
})
instead of
.on('click', 'annoucements-close', function () {
$('announcement-div').hide();
})
for class selectors. Working Fiddle.
If you just want to hide the annoucement which was clicked upon, just change it to
.on('click', '.annoucements-close', function () {
$(this).closest('.announcement-div').hide();
})
I looked at your code and adjusted it a little to demonstrate:
Added your common class on the two announcements "announcement-div"
Attached the document click handler with the jQuery ready event
Used the delegated event selector to listen to clicks within the document that match that common selector
On click of one of the announcement-div's animate the height to 0 and then remove the element
Comments are included in the fiddle. Hope this is helpful!
// Fire this function when the document is ready
$(function() {
// Listen on the whole document for click events on the .announcement-div element
$(document).on('click', '.annoucements-close', function () {
// From the close button find the closest parent "announcement-div"
var annoucement = $(this).closest('.announcement-div');
// Function to run after animating the element (use .hide() to keep element but display:none)
function destroy() {
annoucement.remove();
}
// Animate the annoucement's height to 0 over 400ms and then call the destroy function
annoucement.animate({ height: "0px" }, 400, destroy);
});
});
Updated JS Fiddle
I'm working on an overlay on top of a full-frame google docs iframe. I want the top section of the docs to be covered by an 100% width div which fades on hover, revealing the docs options which become clickable.
I've got the fade transition working but the invisible div blocks the iframe from been clicked. If I use pointer-events:none, change the z-index or display:none I get a nasty flickering effect when the cursor is moved.
Is there a work around?
https://github.com/plasticplant/miscresearch/tree/master/miscresearch
#background-site {
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
}
#background-site iframe {
width: 100%;
height: 100%;
border: none;
overflow: scroll;
}
#header {
position: absolute;
width: 100%;
z-index: 30;
font-size: 55px;
font-family: 'Sporting_Grotesque-Bold';
padding: 5px;
text-align: center;
transition: 0.3s;
background: white;
}
#header:hover {
opacity: 0;
}
<div id="header">
miscresearch
</div>
<div id="background-site"><iframe name="backgrnd" id="backgrnd" scrolling="yes" src="https://docs.google.com/document/d/16_jikyP9LfNibSOvM4XPeuB2jhf8YEYES1p8xhTBBDM/edit?usp=sharing"></iframe></div>
Try this, should work -- i replicated your problem using some divs, but it gets the point across.
First, use the style "pointer-event:none;" to make the upper level div able to be selected through. The lower div has mouseover and mouseout events that call javascript to change the opacity of the overlay.
You can try applying the mouseover and mouseout functions to the div containing the iframe
function hidefunc(){
document.getElementById("test").style.opacity = '0';
}
function showfunc(){
document.getElementById("test").style.opacity ="1"
}
#test{
position:absolute;
top:0px;
width:300px;
height:300px;
background-color:#000000;
transition: opacity .5s;
pointer-events:none;
z-index:2;
}
#base{
position:absolute;
top:0;
z-index:0;
height:50px;
width:600px;
background-color:red;
}
<div id="test">
</div>
<div onmouseover="hidefunc()" onmouseout="showfunc()" id="base">
Link
</div>
Maybe using z-index is a better approach because when you do display:none; on :hover you are not hovering any element so the nasty effect happens.
#header:hover {
opacity: 0;
z-index: -1;
}
Iframes have a load event, which fire once they have loaded.
Simply create your overlay, and remove it once the iframe's onload event fires.
HTML:
<div id="background-site" class="showOverlay">
<iframe name="backgrnd" id="backgrnd" scrolling="yes" src="https://docs.google.com/document/d/16_jikyP9LfNibSOvM4XPeuB2jhf8YEYES1p8xhTBBDM/edit?usp=sharing"></iframe>
</div>
CSS:
#background-site {
position: relative;
}
#background-site.showOverlay:before {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: red;
z-index: 2;
}
JS :
document.getElementById("backgrnd").addEventListener("load", function() {
document.getElementById("background-site").classList.remove('showOverlay')
});
Fr the current code you could also use the parentElement, to achieve the same result, as the event fires on the iframe:
document.getElementById("backgrnd").addEventListener("load", function(e) {
e.target.parentElement.classList.remove('showOverlay')
});
Hi I've a working solution (see below).
Unfortunately it requires (vanilla) JavaScript; I hope you don't mind. I tried several CSS solutions like animations and all but to no avail.
Anyways, the trick is to use separate mouse in and mouse out event listeners on the iframe and overlays respectively.
document.getElementById("overlay").addEventListener("mouseover", overlayDisappear);
document.getElementById("theiframe").addEventListener("mouseout", overlayAppear);
function replaceAll(str, toFind, toReplace){
return str.replace(new RegExp(toFind.toString(),"g"), toReplace.toString());
}
function overlayAppear(){
//console.log("Appear", document.getElementById("overlay").className);
document.getElementById("overlay").className = replaceAll( document.getElementById("overlay").className, "_disappear","_appear");
}
function overlayDisappear(){
//console.log("Disappear", document.getElementById("overlay").className);
document.getElementById("overlay").className = replaceAll( document.getElementById("overlay").className, "_appear","_disappear");
}
#theiframe, #overlay{
width:200px;
height:200px;
position:fixed;
top:0;
left:0;
}
#theiframe{
border: 2px solid black;
}
#overlay{
background:red;
transition:all 0.3s ease;
}
#overlay._appear{
opacity:1;
z-index:1;
}
#overlay._disappear{
opacity:0;
z-index:-1;
}
/*
#overlay:hover{
animation-name: disappear;
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes disappear{
0% { opacity:1; }
50% { opacity:0.5; }
99% { opacity:0; z-index:1; }
100% { opacity:0; z-index:-1; }
}*/
<iframe id="theiframe" src="https://samleo8.github.io/web"></iframe>
<div id="overlay" class="_appear"></div>
.box {
width: 100px;
height: 100px;
background: red;
transition: all 1s ease-in-out;
}
.box:hover {
background: yellow;
}
<div class="box"></div>
If the cursor is over the .box for less than a second, the transition stops and falls back to it's original phase.
Is there a way to somehow force the whole animation, regardless of hover duration?
fiddle
Edit: Similar solution but relying on transition and animation: https://jsfiddle.net/ok7pnrsL/
This is my solution: https://jsfiddle.net/9yu0cozq/1/
Basically you need to add a container for the box and then play with CSS animations.
<div id="container">
<div class="box"></div>
</div>
When the mouse enters the .box then the hidden container appears (please note that for this to work that container should have enough width and height to fit the whole area where the mouse might go).
This container creates an animation for itself to "hide" back in 1s. and while it is shown the .box has an animation for the same time.
#container {
position:absolute;
z-index:1;
width: 0;
height: 0;
}
#container:hover{
animation-name:changeSize;
animation-duration: 1s;
}
#container:hover .box{
animation-name:changeColor;
animation-duration: 1s;
}
.box {
z-index:0;
position:absolute;
width: 100px;
height: 100px;
background: red;
transition:1s background;
}
.box:hover {
background: yellow;
}
#keyframes changeColor {
0% {
background: red;
}
100% {
background: yellow;
}
}
#keyframes changeSize {
0%,99% {
width: 100%;height: 100%;
}
100% {
width: 0;height: 0;
}
}
So, without knowing the real context, this solution gives a series of assumptions that might or might not fit your exact case but gives an idea of how to solve it using pure CSS.
I think you heave to use JS for this. First you need to create animation for background change, and and then you can set it as class and add that class on hover, and remove it when animation ends or on webkitAnimationEnd.
$('.box').hover(function() {
$(this).addClass('animate');
$(this).on('webkitAnimationEnd', function() {
$(this).removeClass('animate');
})
})
.box {
width: 100px;
height: 100px;
background: red;
display: inline-block;
margin: 10px;
}
.box.animate {
animation: changeColor 2s linear;
}
#keyframes changeColor {
0% {
background: red;
}
50% {
background: yellow;
}
100% {
background: red;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box"></div>
<div class="box"></div>
I don't think you can do this without javascript, but it would be interesting to find out.
A light weight javascript solution could be something like this:
// Get the elemnt
var myDiv = document.getElementById('box');
// Detect hover
myDiv.onmouseover = function() {
// Add a force class to the element
myDiv.className += " force";
// Reset the cass name after 1sec (100ms)
setTimeout(function(){ myDiv.className = "box"; }, 1000, myDiv);
}
Change your markup slightly to make things easier for now:
<div id="box" class="box"></div>
And add an extra class to your css styles along with the hover state:
.box {
width: 100px;
height: 100px;
background: red;
transition: all 1s ease-in-out;
}
.box.force,
.box:hover {
background: yellow;
}
Check the jsfiddle
I'm using
jsfiddle.net/ts4dk6hp/
and wondering if I can
a) have the content open by default
b) have a smooth css transition to open (with no javascript)
HTML
<div id="show">
Open
<div id="content">
Close
<br>some text...
</div>
</div>
CSS
#content {
display: none;
}
#show:target #content {
display: block;
}
#show:target #open {
display: none;
}
Any help would be great thanks!
First, I suggest you use javascript instead of just css. 2nd, I want to you to remember that css animations are only supported by newer browsers.
I have updated your jsfiddle, hopefully it will be helpful for you.
HTML
<div id="show">
Open
<div id="content">
<br>some text...
<br> Mur text, duh...
<br> Lorem
<br> Ipsum
<br> Watchama sayin'?
<br> Have fun!
</div>
CSS
#content {
transition: opacity 1s ease-in, height 500ms ease-out;
opacity: 0;
height: 200px;
width: 200px;
background: gray;
}
JS
var open = true;
$('#openclose').click(function() {
if (!open) {
open = true;
$(this).text('Close');
$('#content').css({
opacity: 1,
height: '200px',
overflow: 'hidden',
});
$('#content').one('transitionend', function() {
$(this).css('overflow', 'auto');
});
} else {
open = false;
$(this).text('Open');
$('#content').css({
opacity: 0,
height: '0px',
overflow: 'hidden',
});
$('#content').one('transitionend', function() {
$(this).css('overflow', 'auto');
});
}
});
http://jsfiddle.net/MashedPotatoes/ts4dk6hp/13/
To expand on humble.rumble.6x3's comment, you cannot do the first OR the second of your requirements without JavaScript. The main reason being that CSS is designed to style the content, not perform animations and interact with events (with exceptions).
Following way you can do using css:
1.) content open by default And smooth css transition to open (with no javascript).
#open {
display: none;
}
#show:target #content {
opacity: 0;
}
#show:target #close {
display: none;
}
#show:target #open {
display: block;
}
#content{
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
}
#show{
display:table;
}
<div id="show">
<a href="#show" id="close" >Close</a>
<a href="#hide" id="open" >Open</a>
<div id="content">
<br>some text...
</div>
</div>
Hope it helps.