I have a css element that I am trying to animate.
The box starts out with height 30px. On click I want the box to first shrink to height 0px then animate to 60px
document.getElementById("box1").style = "transition: height 0s; transition-delay: 0s; height:0px";
document.getElementById("box1").style = "transition: height .50s; transition-delay: .50s; height:60px";
I tried the above but the second line overwrites the first.
Here is an example that should help: https://jsfiddle.net/qshruafp/
document.getElementById("box1").addEventListener('click', ManageBoxClick);
function ManageBoxClick() {
console.log('Entered ManageBoxClick');
document.getElementById("box1").animate([
// keyframes
{ height: '30px' },
{ height: '0px' },
{ height: '60px' }
], {
// timing options
duration: 1000
});
}
#box1 {
position relative;
display: block;
background-color: blue;
width: 30px;
height: 30px;
cursor: pointer;
pointer-events: all;
}
<div id="box1"></div>
Related
this code changes the background of the div every time a button is pressed but the new background is supposed to fade in so I set an animation. If you press red, and then another color, it makes the transition the first time, but not from the second on. The background will just appear without animation.
function changit(color) {
document.getElementById('cont').classList = color;
}
#keyframes appear {
0% {opacity:0;}
100% {opacity:1;}
}
#cont {
position: relative;
width: 100px;
height: 100px;
display: block;
}
#cont::before {
width: 93%;
height: 100%;
position: sticky;
content: "";
display: block;
}
.red::before, .blue::before, .black::before { transition: opacity 2s ease;animation:appear 2s; }
.red::before {
background: url(https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg) no-repeat;
}
.blue::before {
background: url(https://www.gravatar.com/avatar/24780fb6df85a943c7aea0402c843737?s=64&d=identicon&r=PG) no-repeat;
}
.black::before {
background:url(https://cdn.sstatic.net/Sites/stackoverflow/Img/subcommunities/intel.svg?v=0371bf2f3b96) no-repeat;
}
<div id="cont">
</div>
<button onclick="changit('red');">make red</button>
<button onclick="changit('blue');">make blue</button>
<button onclick="changit('black');">make black</button>
isnt the animation supposed to play again if the element changes class? How can I reset the animation to start again every time the element changes class to achieve this effect?
The animation property value actually never changes, with all the classes it's always the same and there is no point in time where it's unset, so it won't fire again.
You need to force the CSS engine sees that it did change. For this you can remove the class altogether force what is called a "reflow", which is when the CSS engine recalculates all the element's boxes in the page, and then only, set the class back:
function changit(color) {
const elem = document.getElementById('cont');
elem.classList = "";
elem.offsetWidth; // force reflow
elem.classList = color;
}
function changit(color) {
const elem = document.getElementById('cont');
elem.classList = "";
elem.offsetWidth; // force reflow
elem.classList = color;
}
#keyframes appear {
0% {opacity:0;}
100% {opacity:1;}
}
#cont {
position: relative;
width: 100px;
height: 100px;
display: block;
}
#cont::before {
width: 93%;
height: 100%;
position: sticky;
content: "";
display: block;
}
.red::before, .blue::before, .black::before { transition: opacity 2s ease;animation:appear 2s; }
.red::before {
background: url(https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg) no-repeat;
}
.blue::before {
background: url(https://www.gravatar.com/avatar/24780fb6df85a943c7aea0402c843737?s=64&d=identicon&r=PG) no-repeat;
}
.black::before {
background:url(https://cdn.sstatic.net/Sites/stackoverflow/Img/subcommunities/intel.svg?v=0371bf2f3b96) no-repeat;
}
<div id="cont">
</div>
<button onclick="changit('red');">make red</button>
<button onclick="changit('blue');">make blue</button>
<button onclick="changit('black');">make black</button>
Or, since you're using JS anyway, use the WebAnimations API:
function changit(color) {
const elem = document.getElementById('cont');
elem.classList = color;
elem.animate(
[ { opacity: 0 }, { opacity: 1 } ],
{ duration: 2000, repeat: 1 }
);
}
function changit(color) {
const elem = document.getElementById('cont');
elem.classList = color;
elem.animate(
[ { opacity: 0 }, { opacity: 1 } ],
{ duration: 2000, repeat: 1 }
);
}
#cont {
position: relative;
width: 100px;
height: 100px;
display: block;
}
#cont::before {
width: 93%;
height: 100%;
position: sticky;
content: "";
display: block;
}
.red::before {
background: url(https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg) no-repeat;
}
.blue::before {
background: url(https://www.gravatar.com/avatar/24780fb6df85a943c7aea0402c843737?s=64&d=identicon&r=PG) no-repeat;
}
.black::before {
background:url(https://cdn.sstatic.net/Sites/stackoverflow/Img/subcommunities/intel.svg?v=0371bf2f3b96) no-repeat;
}
<div id="cont">
</div>
<button onclick="changit('red');">make red</button>
<button onclick="changit('blue');">make blue</button>
<button onclick="changit('black');">make black</button>
The following hides the element, but I cannot recover when I hover over it.
I've checked devtools to see that it is indeed rendered on the screen, I just can't see the contents of the div.
How do I make it so the div is visible only on hover?
.visible-on-hover {
visibility: hidden;
}
.visible-on-hover:hover {
visibility: visible !important;
}
Elements with visibility: hidden; don't receive any mouse events, so :hover never triggers on such an element.
Instead of visibility, you can work with opacity:
div {
background-color: orange;
height: 200px;
width: 400px;
padding: 50px;
}
.visible-on-hover {
opacity: 0;
transition: opacity .3s ease;
}
.visible-on-hover:hover {
opacity: 1;
}
<div class="visible-on-hover">visible only on hover</div>
you can not hover, focus or select a hidden element.
you can use opacity
.visible-on-hover {
opacity: 0;
}
.visible-on-hover:hover {
opacity: 1;
}
I've been searching for a couple of days to add a fade transition effect on the backgroundImage that I'm changing through a Vue app.
Here is the code snippet I've been testing on:
new Vue({
el: "#main",
data: {
images: [
"https://images.freeimages.com/images/large-previews/bfd/clouds-1371838.jpg",
"https://images.freeimages.com/images/large-previews/ffa/water-lilly-1368676.jpg",
"https://images.freeimages.com/images/large-previews/efb/lotus-flower-1382251.jpg"
],
current: 0,
show: false
},
methods: {
changeBG: function () {
if (this.current < this.images.length - 1) {
this.current = this.current + 1;
} else {
this.current = 0;
}
}
}
});
.main {
height: 800px;
width: 100%;
margin-left: auto;
margin-right: auto;
z-index: 0;
background-repeat: no-repeat;
background-size: cover;
background-position: center 0px;
}
button {
width: 200px;
height: 25px;
margin: 10px;
}
p.hello{
color: white;
margin: 10px;
font-size: 50px;
}
.fade-enter-active,
.fade-leave-active {
transition: all 2s linear;
}
.fade-enter-to,
.fade-leave {
opacity: 0;
}
.fade-enter,
.fade-leave-to {
opacity: 1;
}
/* hello example transition */
.slide-fade-enter-active {
transition: all 1s ease;
}
.slide-fade-leave-active {
transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateX(10px);
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<transition name="fade">
<div v-if="changeBG" class="main" id="main" :style="{ backgroundImage: 'url(\'' + images[current] + '\')' }">
<button v-on:click="changeBG">
changeBG
</button>
<div id="testFromGuide">
<button #click="show = !show">
toggleHello
</button>
<transition name="slide-fade">
<p class="hello" v-if="show">all your base are belong to us</p>
</transition>
</div>
</div>
</transition>
My first question if this is simply possible? The reason I'm using backgroundImage is because the website I'm using this on has a background that is most easy to handle responsively through this (always covering, no repeat and keeping it center). And my scond question would be, if not, is there a possibility to make it work with a background set as described here?
In the codepen I've added an example of the vue guide to make sure it works and nothing is else is wrong. And the example works perfectly. Can't seem to find the answer for my example but I've been beginning to suspect it is simply not possible or I can't seem to find why vue isn't detecting something is changing.
For Vue Transitions to work, you need to change the DOM elements. So this way would work if you were changing actual images out. In your example, you're only changing an attribute value. The DOM doesn't trigger a transition since its the same element.
However, you can use the :key attribute to convince VUE to replace the element thus giving you a transition between 2 elements.
You can also set the image with inline CSS like you're doing in the example. You'll still have to create the transition in your CSS.
Here's an example using Vue Transition
new Vue({
el: "#main",
data: {
currentID: 0,
images: [
'https://images.freeimages.com/images/large-previews/efb/lotus-flower-1382251.jpg',
'https://images.freeimages.com/images/large-previews/ffa/water-lilly-1368676.jpg',
'https://images.freeimages.com/images/large-previews/bfd/clouds-1371838.jpg'
]
},
methods: {
toggleImage: function(){
if(this.currentID < this.images.length-1){
this.currentID +=1
} else {
this.currentID = 0
}
}
}
});
body {
overflow: hidden;
}
.main {
position: relative;
}
img {
width: 100%;
height: auto;
display: block;
position: absolute;
-webkit-transition: all 3s ease;
transition: all 3s ease;
}
button {
z-index: 100;
position: relative;
width: 200px;
height: 25px;
margin: 20px;
}
/* prefix with transition name */
.slide-fade-enter-active {
opacity: 1;
z-index: 10;
}
.slide-fade-leave-active {
opacity: 1;
}
.slide-fade-enter,
.slide-fade-leave-to {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div class="main" id="main">
<transition name="slide-fade">
<!-- SRC comes from the array of images the :key is important for vue to believe its a 'new' DOM element and do the transition -->
<img v-bind:src="images[currentID]" v-bind:key="currentID" />
</transition>
<button #click="toggleImage">
Toggle Image
</button>
</div>
However, you don't get a lot of control over that since it uses image tags. Instead, it might be better to use a background image like this:
new Vue({
el: "#main",
data: {
currentID: 0,
images: [
'https://images.freeimages.com/images/large-previews/efb/lotus-flower-1382251.jpg',
'https://images.freeimages.com/images/large-previews/ffa/water-lilly-1368676.jpg',
'https://images.freeimages.com/images/large-previews/bfd/clouds-1371838.jpg'
]
},
methods: {
toggleImage: function(){
if(this.currentID < this.images.length-1){
this.currentID +=1
} else {
this.currentID = 0
}
}
}
});
.main {
/* make this the size of the window */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.theImage {
width: 100%;
height: 100%;
position: absolute;
background-color: #333;
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
-webkit-transition: all 3s ease;
transition: all 3s ease;
}
button {
z-index: 100;
position: relative;
width: 200px;
height: 25px;
margin: 20px;
}
/* prefix with transition name */
.slide-fade-enter-active {
opacity: 1;
z-index: 10;
}
.slide-fade-leave-active {
opacity: 1;
}
.slide-fade-enter,
.slide-fade-leave-to {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div class="main" id="main">
<transition name="slide-fade">
<!-- SRC comes from the array of images the :key is important for vue to believe its a 'new' DOM element and do the transition -->
<div class="theImage" v-bind:style="{'background-image': 'url(' + images[currentID] + ')'}" v-bind:key="currentID"></div>
</transition>
<button #click="toggleImage">
Toggle Image
</button>
</div>
The answer was indeed to forget about vue transitions and let css do the work. A working example can be found here:
new Vue({
el: "#main",
data: {
show: false,
BG1: true,
BG2: false,
BG3: false
},
methods: {
changeBG: function(){
if (this.BG1 == true){
this.BG1 = false;
this.BG2 = true;
this.BG3 = false;
} else if (this.BG2 == true) {
this.BG1 = false;
this.BG2 = false;
this.BG3 = true;
} else if (this.BG3 == true) {
this.BG1 = true;
this.BG2 = false;
this.BG3 = false;
}
},
showBG1: function(){
if (this.BG1 == true){
return "";
} else {
return "transparent";
}
},
showBG2: function(){
if (this.BG2 == true){
return "";
} else {
return "transparent";
}
},
showBG3: function(){
if (this.BG3 == true){
return "";
} else {
return "transparent";
}
}
}
});
.main {
}
#bgs img.transparent {
opacity:0;
transform: translateY(-0.0px);
}
#bgs img{
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
z-index: -1;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
#bgs img{
left: 50%;
margin-left: -512px; /* 50% */
}
}
button {
z-index: 100;
position: relative;
width: 200px;
height: 25px;
margin: 20px;
}
p.hello{
color: white;
margin: 40px;
font-size: 50px;
}
.fade-enter-active {
transition: all 1s ease;
}
.fade-leave-active {
transition: all 1s ease;
}
.fade-enter, .fade-leave-to{
transform: translateY(-5px);
opacity: 0;
}
/* hello example transition */
.slide-fade-enter-active {
transition: all 1s ease;
}
.slide-fade-leave-active {
transition: all 1s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
transform: translateY(-5px);
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div class="main" id="main">
<div id="bgs">
<img :class="showBG1()" src="https://images.freeimages.com/images/large-previews/efb/lotus-flower-1382251.jpg">
<img :class="showBG2()" src="https://images.freeimages.com/images/large-previews/ffa/water-lilly-1368676.jpg">
<img :class="showBG3()" src="https://images.freeimages.com/images/large-previews/bfd/clouds-1371838.jpg">
</div>
<button #click="changeBG">
changeBG
</button>
<div id="testFromGuide">
<button #click="show = !show">
toggleHello
</button>
<transition name="slide-fade">
<p class="hello" v-if="show">all your base are belong to us</p>
</transition>
</div>
</div>
It's not perfect yet as for every extra background I need to add a function and add an extra if else loop to the changeBG function. It would be more elegant if this could be done with a list variable but I've not found a way to make this work with the :class method. I hope to look into this at a later time.
Not sure whether it is chrome specific bug or what, but when I am transitioning child element on a parent that has overflow hidden with border radius, the overflow is visible, while the transition is in place.
var wrapper = document.getElementsByClassName('wrapper')[0],
img = document.getElementsByTagName('img')[0];
/*
Click anywhere in the bordered area to toggle img
*/
wrapper.addEventListener('click', function() {
if (!img.className) {
img.className = 'hidden';
} else {
img.className = '';
}
}, false);
.wrapper {
overflow: hidden;
border-radius: 60px;
border: 1px solid salmon;
}
img {
width: 100%;
height: auto;
opacity: 1;
transition: opacity 1s ease;
}
.hidden {
opacity: 0;
}
<div class="wrapper">
<img src="http://static.planetminecraft.com/files/resource_media/screenshot/1211/y-you-no-work_1687402.jpg">
</div>
Here's a fiddle demonstrating the issue https://jsfiddle.net/827vuyqb/2/
Any solutions, workarounds for this?
Just position the wrapper element, and give it a z-index:
var wrapper = document.getElementsByClassName('wrapper')[0],
img = document.getElementsByTagName('img')[0];
/*
Click anywhere in the bordered area to toggle img
*/
wrapper.addEventListener('click', function() {
if (!img.className) {
img.className = 'hidden';
} else {
img.className = '';
}
}, false);
.wrapper {
overflow: hidden;
border-radius: 60px;
border: 1px solid salmon;
/*Position and z-index*/
position: relative;
z-index: 1;
}
img {
width: 100%;
height: auto;
opacity: 1;
transition: opacity 1s ease;
}
.hidden {
opacity: 0;
}
<div class="wrapper">
<img src="http://static.planetminecraft.com/files/resource_media/screenshot/1211/y-you-no-work_1687402.jpg">
</div>
I've noticed that transition is not working when the element is also changing from display none to block. Why is that? It works if I remove the display attribute.
CSS:
#box {
width: 150px;
height: 150px;
background: red;
transform: scale(0);
display: none;
transition: transform .5s;
}
#box.active {
transform: scale(1);
display: block;
}
http://jsfiddle.net/640kL55u/
Because it has display: none to begin with, the other styles are not being taken into the dom to be transitioned once display: block is added.
Instead, you can hide the div with height, so its still on the page but not showing. Then add the height on the show div.
JS Fiddle
Any change from or to display: none won't trigger transitions.
You can, however, change the display property and then add the class name at the end of the javascript stack. For instance:
function showElem(elem) {
elem.style.display = "block";
setTimeout(function() {
elem.classList.add("active");
}, 0);
}
And then pass element nodes to this function.
You can't transition with display: none; properties...
$("button").on("click", function() {
$("#box").addClass("active");
});
#box {
width: 0;
height: 0;
overflow: hidden;
background: red;
transform: scale(0);
transition: transform .5s;
}
#box.active {
width: 150px;
height: 150px;
transform: scale(1);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="box"></div>
<button>CLICK</button>