I have an issue with animation created using css. Everything is working fine, I just need to finish this and set input type to reset animation.
Here is my css that should reset animation:
$('button').on('click', function(){
var heading = $('h1').clone().removeClass();
$('h1').remove();
$('header').append(heading);
$('h1').addClass('fadein_element');
});
CSS animation
#keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
enter code here
.fadein{-webkit-animation: fadein 3s ease-in ;
-moz-animation: fadein 3s ease-in ;
animation: fadein 3s ease-in ;
This was my basic html for that part:
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
WebGear
And here is the edited one:
input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
<h1 class="fadein_element"><button class="fadein_element">WebGear</button></h1>
I got lost in it and nothing resets the animation. Other than that it works fine.To sum it up, do you guys have any ideas how to get this working ? Preferably with default html code...
Edit: Posting a minimal code wich I am trying to get working
</head>
<body>
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
Something
<input type="radio" name="radio-set" id="st-control-2"/>
Happiness
<input type="radio" name="radio-set" id="st-control-3"/>
Tranquillity
<input type="radio" name="radio-set" id="st-control-4"/>
Positivity
<input type="radio" name="radio-set" id="st-control-5"/>
WebGear
<div class="st-scroll">
<section class="st-panel" id="st-panel-5">
<div class="st-deco" data-icon="H"></div>
<div id="section1">
<div id="menu"> <img id="menuitem" src="Images/Menuitem.png"/>
<div id="hlava">
<div id="flashContent">
---Here goes the content---
There are just closing tags
And CSS
#keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
.fadein{-webkit-animation: fadein 3s ease-in ;
-moz-animation: fadein 3s ease-in ;
animation: fadein 3s ease-in ;
Once I click on "radio button" I want my (in this case st-panel-5) to reset animation. Any of those 5 buttons will do that so I belive I could apply that to class st-panel.
To solve this you set all but the checked radio input's targeted st-panel to display: none; opacity: 0, and then set animation: fadein ...; to the checked radio input's targeted st-panel-nn id.
Than
Click the 2 first radio inputs to check the behavior
#st-control-1:checked ~ .st-scroll .st-panel:not(#st-panel-1),
#st-control-2:checked ~ .st-scroll .st-panel:not(#st-panel-2) {
opacity: 0;
display: none;
}
#st-control-1:checked ~ .st-scroll #st-panel-1,
#st-control-2:checked ~ .st-scroll #st-panel-2 {
animation: fadein 1.5s ease-in;
}
#keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
<div class="st-container">
<input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
Something
<input type="radio" name="radio-set" id="st-control-2"/>
Happiness
<input type="radio" name="radio-set" id="st-control-3"/>
Tranquillity
<input type="radio" name="radio-set" id="st-control-4"/>
Positivity
<input type="radio" name="radio-set" id="st-control-5"/>
WebGear
<div class="st-scroll">
<section class="st-panel" id="st-panel-1">
<div class="st-deco" data-icon="H"></div>
<div id="section1">
<div id="menu"> <img id="menuitem" src="Images/Menuitem.png"/>
<div id="hlava">
<div id="flashContent">
Some content 1
</div>
</div>
</div>
</div>
</section>
<section class="st-panel" id="st-panel-2">
<div class="st-deco" data-icon="H"></div>
<div id="section1">
<div id="menu"> <img id="menuitem" src="Images/Menuitem.png"/>
<div id="hlava">
<div id="flashContent">
Some content 2
</div>
</div>
</div>
</div>
</section>
</div>
</div>
"Here is my css that should reset animation:" - it's actually Javascript - jQuery, but maybe I misunderstood.
After an animation is executed use this code:
element.offsetWidth = element.offsetWidth;
but I think it's pure Javascript (without jQuery) so in your example it would be:
document.getElementsByTagName("h1")[0].offsetWidth = document.getElementsByTagName("h1")[0].offsetWidth
You can find more information here.
Related
This question already has answers here:
Transitions on the CSS display property
(37 answers)
Closed 1 year ago.
I have a program, where I use JavaScript to make one div appear and another disappear when I click something:
<div id="first" class="active"> some content here </div>
<div id="second" class="inactive"> some content here </div>
<button onclick="change()"> button </button>
function change(){
document.getElementById("first").className="inactive";
document.getElementById("second").className="active"
}
.active{ display: block; }
.inactive{display: none; }
I'd like to make it so that one div fades in while the other fades out.
I've tried transition: ease 1s;, transition: display 1s and using a custom transition, however none of them have worked.
Try clicking the different buttons on this Carrd - the words fade in and out. I'm going for that effect here.
I'd prefer a solution using only HTML, CSS and/or JavaScript -- trying to keep this project simple.
Use opacity:
function change() {
document.getElementById("first").className = "inactive";
document.getElementById("second").className = "active"
}
.active{
opacity:1;
}
.inactive{
opacity:0;
}
div{
transition:opacity 1s;
}
<div id="first" class="active"> some content here </div>
<div id="second" class="inactive"> some content here </div>
<button onclick="change()"> button </button>
To prevent the hidden element from taking up space, use:
function change() {
const f1 = document.getElementById("first");
f1.style.opacity = "0";
setTimeout(() => {
f1.style.display = "none"
const f2 = document.getElementById("second");
f2.style.display = "block";
setTimeout(() => {
f2.style.opacity = "1";
}, 50);
}, 1000);
}
.active {
display: block;
opacity: 1;
}
.inactive {
display: none;
opacity: 0;
}
div {
transition: opacity 1s;
}
<div id="first" class="active"> some content here </div>
<div id="second" class="inactive"> some content here </div>
<button onclick="change()"> button </button>
I am trying to implement a simple animation with Vue but unsuccessful so far. I have two divs which are rendered depending on the value of a given data property
<!--Step 1-->
<div v-if="step == 1" :transition="'slide'">
<select class="form-control" v-model="id.category">
<option value="null">Please Select</option>
<option v-for="cat in cats" :value="cat.id">#{{cat.name}}</option>
</select>
</div>
<!--Step 2-->
<div v-if="step==2" :transition="'slide'" style="background: red">
<select #change="fixImage(id.subcategory)" class="form-control quoteForm" v-model="id.subcategory">
<option value="null">Please Select</option>
<option v-for="subcat in filtered_subcat" :value="subcat.id">#{{subcat.name}}</option>
</select>
</div>
I effectively have a "next button" that will increment the value of step and then show the relevant div. I would like to create like a slide type of effect whereby when the user clicks next, step 1 slides to the left and step 2 slides in. My animation css is as follows:
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
Can anyone point in the right direction?
Wrap the changing content in a <transition> component:
<transition name="slide-fade">
<div v-if="step == 1">
STEP 1 CONTENT
</div>
</transition>
<transition name="slide-fade">
<div v-if="step == 2">
STEP 2 CONTENT
</div>
</transition>
The name of the transition, slide-fade, matches the CSS you supplied. Since you probably want the sliding content to overlap, one should have position: absolute. For example, the content sliding out:
.slide-fade-leave-active {
position: absolute;
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
Here's a Demo:
new Vue({
el: "#app",
data() {
return {
step: 1
}
}
});
.slide-fade-enter-active {
transition: all .3s ease;
}
.slide-fade-leave-active {
position: absolute;
transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active below version 2.1.8 */ {
transform: translateX(10px);
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<!--Step 1-->
<transition name="slide-fade">
<div v-if="step == 1">
STEP 1 CONTENT
</div>
</transition>
<!--Step 2-->
<transition name="slide-fade">
<div v-if="step == 2">
STEP 2 CONTENT
</div>
</transition>
<button #click="step++">
Next >
</button>
</div>
So when I press either buttons, the text should render in a fixed position. However, the text does render but it requires the closing animation of the previous text to finish before it takes the fixed position. The codes are as below:
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-animate#1.7.8/angular-animate.js"></script>
<div data-ng-app="myApp" data-ng-controller="myCtrl">
<input type="button" value="Show A" data-ng-click="boolA()" />
<input type="button" value="Show B" data-ng-click="boolB()" />
<input type="button" value="Show C" data-ng-click="boolC()" />
<div data-ng-show="bool.a" class="test">
<h1>Picked A</h1>
</div>
<div data-ng-show="bool.b" class="test">
<h1>Picked B</h1>
</div>
<div data-ng-show="bool.c" class="test">
<h1>Picked C</h1>
</div>
</div>
CSS
.test.ng-hide-add,.test.ng-hide-remove{
transition:0.5s linear all;
opacity:1;
}
.test.ng-hide{
opacity:0;
}
JS
var app=angular.module('myApp',['ngAnimate']);
app.controller('myCtrl',function($scope){
$scope.bool={
a:false,
b:false,
c:false
}
$scope.boolA=function(){
$scope.bool.a=true;
$scope.bool.b=false;
$scope.bool.c=false;
}
$scope.boolB=function(){
$scope.bool.a=false;
$scope.bool.b=true;
$scope.bool.c=false;
}
$scope.boolC=function(){
$scope.bool.a=false;
$scope.bool.b=false;
$scope.bool.c=true;
}
});
Here is a JSFiddle implementation of what I have so far: link
Any tips is appreciated. Thanks for reading!
You need to use a parent div and set position: absolute to the .test divs, I also shortened your code a little:
var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl', function($scope) {
$scope.bool = {
a: false,
b: false,
c: false
}
$scope.showBool = function(currKey){
for(var key in $scope.bool){
if(key === currKey) $scope.bool[key] = true
else $scope.bool[key] = false
}
}
})
.results { position: relative; }
.test {
position: absolute;
top: 0; left: 0;
}
.test.ng-hide-add,
.test.ng-hide-remove {
transition: 0.5s linear all;
opacity: 1;
}
.test.ng-hide {
opacity: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-animate#1.7.8/angular-animate.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="button" value="Show A" ng-click="showBool('a')" />
<input type="button" value="Show B" ng-click="showBool('b')" />
<input type="button" value="Show C" ng-click="showBool('c')" />
<div class="results">
<div ng-show="bool.a" class="test">
<h1>Picked A</h1>
</div>
<div ng-show="bool.b" class="test">
<h1>Picked B</h1>
</div>
<div ng-show="bool.c" class="test">
<h1>Picked C</h1>
</div>
</div>
</div>
I am trying to make the toggled descriptions either slide or fade in, instead of suddenly appear. I also want to preserve the feature of the text moving up and down to accommodate the text that has been toggled on. Ideal situation would be to do this with CSS or Javascript, without jQuery etc.
Already tried CSS opacity transition, but the text doesn't move up and down to accommodate the toggled on text;
function view(id) {
var x = document.getElementsByClassName("descriptions");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].id !== id)
x[i].style.display = "none";
}
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}
.descriptions {
display: none;
}
<div class="toggle" id="a" onclick="view('a1');">Toggle Div 1
<div id="a1" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>
<div class="toggle" id="b" onclick="view('a2');">Toggle Div 2
<div id="a2" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>
<div class="toggle" id="c" onclick="view('a3');">Toggle Div 3
<div id="a3" class="descriptions"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>
Maybe something like this using the height?
function view(id) {
let el = document.getElementById(id);
if (el.classList.contains('hide')) {
el.classList.remove('hide');
} else {
el.classList.add('hide');
}
}
.toggle {
overflow: hidden;
}
.descriptions {
max-height: 100px;
transition: all 0.5s ease-in;
}
.hide {
max-height: 0 !important;
transition: all 0.2s ease-out;
}
<div class="toggle" id="a" onclick="view('a1');">Toggle Div 1
<div id="a1" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>
<div class="toggle" id="b" onclick="view('a2');">Toggle Div 2
<div id="a2" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>
<div class="toggle" id="c" onclick="view('a3');">Toggle Div 3
<div id="a3" class="descriptions hide"> Here's some text we want to toggle visibility of. Let's do it!</div>
</div>
I want to create a css with following specifications :
When I click on a link / button in a form, it should expand its options horizontally.
It should collapse after selecting the option.
EDIT:
To elaborate my query, let me attach the few images which will explain the exact query.
Step 1. Onhover or OnClick on Image Field, it should expand a Div included with 4 Images.
Step 2. If I select one of the Four Image, the collapse the Div and Display the Selected image in the Image field.
Please suggest the best possible code.
well..hopefully i have understood you correctly..
var expandFn = function(){
var wrappBl = document.getElementsByClassName('expand')[0];
var trigg = document.getElementById('trigger');
var el = document.getElementsByTagName('input');
var elArr = [].slice.call(el);
this.getAction = function(){
trigg.addEventListener('click', function(){
if(wrappBl.classList.contains('active')){
wrappBl.classList.remove('active');
}
else {
wrappBl.classList.add('active');
}
});
}
getAction()
this.checkIf = function(){
for (var i = 0; i < elArr.length; i++) {
elArr[i].addEventListener('click', function(){
if( this.checked === true){
wrappBl.classList.remove('active');
};
})
}
}
checkIf();
}
setTimeout(function(){expandFn();},0)
.expand input,
.expand label{
display: block;
width: 50%;
}
div.expand{
width: 100px;
-webkit-transition: transform 400ms ease, opacity 400ms ease;
transition: transform 400ms ease, opacity 400ms ease;
visibility:hidden;
opacity: 0;
}
div.expand.active{
visibility: visible;
opacity: 1;
}
<div class="wrap">
<a id="trigger" href="#">expand</a>
<div class="expand">
<h4>title of the option</h4>
<input name="option1" type="checkbox">
<label for="option1">choose that</label>
<input name="option2" type="checkbox">
<label for="option2">choose that</label>
<input name="option3" type="checkbox">
<label for="option3">choose that</label>
</div>
</div>