CODEWITHSUNDEEP
csscss-transitionswebkit-appearance
DasBeasto
DasBeasto

Reputation: 2292

-webkit-appearance forcing transitions?

Given a basic HTML template and CSS style, I'm seeing two different elements react completely different.

setTimeout(function() {
  document.body.id = 'animate';
}, 100);
#animate input[type="checkbox"]{
  width: 100px;
  height: 100px;
  transition: 2s all;
  -moz-appearance: none;
}
#animate div{
  width: 100px;
  height: 100px;
  background:blue;
  transition: 2s all;
}
<input type="checkbox"/>
<div></div>

If you open this in a browser, you see that, on load, the div already has its 100px height/width, yet the checkbox grows from 0px to 100px height/width over 2s.

enter image description here

Why does the input behave differently than the div? Is it because the input has default -webkit-appearance giving it something to transition between?

Upvotes: 6

Views: 287

Answers (4)

kind user
kind user

Reputation: 41913

The answer is simple. The input's style has a pre-loaded values in the DOM, that's why just right after appearing in the document, smoothly changes his shape.

Quite contrary with the div element. The div hasn't any pre-loaded, default values in the DOM before setting them by the user. That's why it appears in the document with already set size.

Important note
If you want the transition to work, it has to have a set, starting, default value and ending value. The animation will occur between these two values. The input has already set the default value of the size, that's why the animation will occur.

You may ask, so why the background transition is working? It works, since the default value of background is transparent. 

setTimeout(function() {
  $('.xx').addClass('x');
}, 500);
* {
  margin: 0;
  padding: 0;
  border: 0;
}
input[type="checkbox"] {} div {} .x {
  width: 100px;
  height: 100px;
  transition: all 2s ease;
  background: blue;
}
.container {
  display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>

  <input type='checkbox'>
  <div class='xx'></div>
  <input class='xx' type="checkbox">

</div>

Upvotes: 1

Asons
Asons

Reputation: 87303

The div's default width/height is auto and as such it won't animate.

The input has a default width/height and as such will animate.

As a side note, the transition does work on the div, though only animate its color, as it is possible to animate a color from transparent to blue

You should also consider to not use all with transition, as it can give unpredictalbe result because of this fact that browsers does set some values on elements to a default value, where some can be animated, some can't.

So, in your case, if your intention is to animate width/height, set it up like this: transiton: width 2s ease, height 2s ease;

Upvotes: 2

Rohit Kumar
Rohit Kumar

Reputation: 2031

Browsers have their own basic CSS styling of elements, the checkbox too have it. When you inspect the element you can see width and height to the checkbox applied by the browser, that will be overridden when your external stylesheets loads. And animating it as you have given transition to it.

Upvotes: 0

Brain Foo Long
Brain Foo Long

Reputation: 2087

Short answer without being to technical. CSS transition's will do it's job when there is a previous state to start animate from.

A default div doesn't have any styling by default. An input element is always pre-styled in the browser itself.

Here is a fiddle that can be used to re-create the behaviour that the OP mentioned. It simulate external loading with a simply JS delay. https://jsfiddle.net/xvt359ju/1/

Nevermind, 2 other answers was faster than me.

Upvotes: 0

Related Questions