Can you animate just one type of css transform using transitions?
My css looks like this:
cell{
transform: scale(2) translate(100px, 200px);
transition: All 0.25s;
}
Now I only want to animate the scale property. I could use position:absolute with left/right properties, but translate() performs better in terms of performance. I also want to avoid adding extra html elements.
Check out the Fiddle here: http://jsfiddle.net/6UE28/2/
Absolutely not! It is not possible to exclusively use the transition property for specific values of the transform attribute such as scale(2).
One potential remedy could involve incorporating additional HTML elements, like so: (regrettably, this necessitates extra HTML markup)
<div class="scale">
<div class="translate">
Hello Universe
</div>
</div>
div.scale:hover {
transform: scale(2);
transition: transform 0.25s;
}
div.scale:hover div.translate {
transform: translate(100px,200px);
}
Absolutely! The trick is to divide it into two selectors, one with transition: none. Then, initiate a CSS reflow in between to ensure that the change is applied correctly (otherwise it will be treated as a single change and transitioned together).
var element = document.getElementById('element');
element.addEventListener('click', function() {
element.classList.add('enlarged');
element.offsetHeight; /* CSS reflow */
element.classList.add('moved');
});#element { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#element.enlarged { transform: scale(2); transition: none; }
#element.moved { transform: scale(2) translate(100px); transition: transform 3s; }<div id="element"></div>A new feature is now available where translate, scale, and rotate have been relocated to individual CSS properties. This change allows for more flexibility and customization in styling elements! (Check out MDN for more information: translate, scale, rotate)
Now you can easily implement these transformations with separate CSS properties:
div{
scale: 1;
translate: 0;
transition: scale 0.4s;
}
div.clicked{
scale: 2;
translate: 100px 200px;
}
Take a look at this live example: http://jsfiddle.net/bjkdthr5/1/ (note that only the scale property will animate)
Absolutely, go ahead and give it a try. To achieve this effect, make sure to utilize only one transform on the element.
One common misconception is that you apply the transform directly to the element itself. In reality, you apply it to the change-state (via a pseudo class like :hover or another class with the desired styles for the changed state). Take a look at @David's comment on your question for further clarification. Only alter properties that need changing based on the modified state in order to animate them.
To sum up, modify them selectively according to the altered state.
Solution 1: Utilizing Javascript (based on the fiddle link provided in your query)
Check out the demo here: http://jsfiddle.net/abhitalks/6UE28/4/
Relevant CSS Code:
div{
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
/* Avoid specifying transforms here */
}
Relevant jQuery Code:
$('...').click(function(){
$("#trgt").css({
"-webkit-transform": "scale(0.5)"
});
});
// OR
$('...').click(function(){
$("#trgt").css({
"-webkit-transform": "translate(100px, 100px)"
});
});
// OR
$('...').click(function(){
$("#trgt").css({
"-webkit-transform": "scale(0.5) translate(100px, 100px)"
});
});
Solution 2: Relying solely on CSS
Another demonstration can be found here: http://jsfiddle.net/abhitalks/4pPSw/1/
Relevant CSS Code:
div{
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
/* Avoid specifying transforms here */
}
div:hover {
-webkit-transform: scale(0.5);
}
/* OR */
div:hover {
-webkit-transform: translate(100px, 100px);
}
/* OR */
div:hover {
-webkit-transform: scale(0.5) translate(100px, 100px);
}
Instead of triggering a forced reflow, you can achieve the same result using setTimeout.
var box = document.getElementById('box');
box.addEventListener('click', function() {
box.classList.add('enlarged');
setTimeout(function() {box.classList.add('moved');})
});#box { width: 20px; height: 20px; background-color: black; border-radius: 100%; }
#box.enlarged { transform: scale(2); transition: none; }
#box.moved { transform: scale(2) translate(100px); transition: transform 3s; }<div id="box"></div>There are 4 section divs that need to be displayed in the center of the page when clicked, but the last one appears further down. This is likely due to the flex box nature. What is the best way to ensure all sections appear at the exact same location? Ano ...
Is there a way to use the same class, like .outer, for both divs but with different styling for the parent element when there are more than two children? Kindly refer to the example provided below: .outer1{ border: solid 6px #f00; } .outer2{ b ...
As a newcomer to Twitter Bootstrap, I'm wondering how I can center a span within a parent row. Currently, I am working with Twitter Bootstrap Version 2.3 instead of 3.1. In version 3.1, there is a center-block feature that I cannot utilize in 2.3. Th ...
Having trouble aligning elements in my React app using material-ui 1.0 and its JSS solutions. The code I've written below should center justify, but it's not working no matter how I configure it. I suspect there might be a naming issue since mat ...
How can I set a background image for a textbox that is clickable? I tried using a div tag with position:absolute positioned above the textbox, and included the image within it. However, the issue is that the image appears above the text. I attempted to a ...
After creating a website for a church using Foundation, SASS, and Compass, I noticed a horizontal scroll issue when resizing the window. Adding overflow-x: hidden; seemed to fix it, but there was still about 20px of padding on the right side when testing ...
https://jsfiddle.net/drqjmssy/ Seeking assistance from the linked jsfiddle, I aim to align "div class='main_content'" vertically with "div class='sidebar'". What would be the best approach to achieve this alignment? In case the fiddle ...
Can a website still be made responsive without relying on media queries when flexbox is already implemented? Are there specific scenarios where the utilization of media queries offers enhanced control? ...
I came across a design on Facebook that resembles a timeline, but I am having trouble adjusting the height of the ul element. <ul class="timeline">...</ul> I want the line in the middle to fill the height of the page even when there is less c ...
There seems to be an issue with setting the max-width and height for flex children. The div is getting squished down to fit its children exactly, possibly due to the styling associated with div .content. It's not clear why this is happening. The divi ...
Behold the mystical code written in HTML. <div id="sidebar1"> sidebar1 </div> <div id="sidebar2"> sidebar2 </div> Beneath lies the enchanting CSS code for the aforementioned HTML structure. div { width: 100px; ...
After a user enters login details and the next page loads, the layout shifts as shown in the image below. The entire app layout breaks and the view moves down to accommodate the size of the onscreen keyboard. This issue persists unless the orientation is ...
Consider this block element : <div style="background-color: gray; line-height: 30px;"> Some text and a <a style="background-color: yellow;">link<\a> <\div> Why is it that the yellow color does not extend the full hei ...
I'm experimenting with making three lines perform different animations: line 1 rotating 45deg and translating, line 2 becoming opaque, and line 3 rotating -45deg and translating. Check out my JS Fiddle here <a href="#"><div id="menu" onclic ...
How can I prevent overlay on material-ui's RaisedButton? When I open a modal window, the buttons still remain visible. Which property should be added to the buttons to disable the overlay? Any assistance from those familiar with material-ui would b ...
Currently, I am in the process of developing an Online Shopping website using PHP. To enhance the design of my website, I have implemented bootstrap. One specific query I have is how to display an 'add to cart' button and a discount image when a ...
In my asp.net mvc project, I am dealing with numerous checkboxes. The client has provided me with a PSD file in which the checkboxes are either white or black. In the absence of any check mark indicator, I assume the black ones are checked. My goal is to r ...
I am looking to add a box shadow around the outline of the bubble below. <div class=speech-bubble-dark></div> .speech-bubble-dark { position: absolute; background: #fff; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); border-radius: 0.4em; ...
Given the jQuery Validate basic example provided in the link below, what method can be used to display error messages within form elements whenever feasible (excluding checkboxes)? http://docs.jquery.com/Plugins/validation#source ...
I am currently designing a form with a side navigation bar that will display around 15-20 elements. Each element is represented by an <li> containing a link to open a modal when clicked. This is the current structure of my code: <div id="sidebar ...