All geek questions in one place

CSS3 + Javascript - Will there be a -ms transition: 1st level opacity; only work in IE 10?

Today I played with CSS3 + JavaScript.

Below you have my code (he tried to create the smallest gallery of image fading, I don’t know if I managed to do this).

I'm not quite sure how to install CSS. See comments below:

-ms-transition:opacity 1s ease-in-out; // Will this allone work in IE 10? transition:opacity 1s ease-in-out; // Why do we set this?

Perhaps the smallest JS gallery in the world:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>HB - CSS3 + JS Gallery</title> <meta charset="utf-8"> <style type="text/css"> body{margin:0;text-align:center;font:200px/500px georgia} #g{background:#000;margin:0 auto;width:960px;height:500px;overflow:hidden} #g div{ -webkit-transition:opacity 1s ease-in-out; -moz-transition:opacity 1s ease-in-out; -o-transition:opacity 1s ease-in-out; -ms-transition:opacity 1s ease-in-out; transition:opacity 1s ease-in-out; opacity:0;position:absolute;height:500px;width:960px;} </style> </head> <body> <div id="g"> <div style="background:#090">1</div> <div style="background:#096">2</div> <div style="background:#963">3</div> <div style="background:#CC0">4</div> </div> <script> function i(){c[a].style.opacity='1'}function o(){c[a].style.opacity='0'}var g=document.getElementById('g'),c=g.children,l=c.length-1,f=function(){if(a==l){o();a=0;i()}else{o();a++;i()}};a=0;i();setInterval(f,4000); </script> </body> </html>
+6
source share
2 answers
 -ms-transition:opacity 1s ease-in-out; // Will this allone work in IE 10?

If Microsoft implemented the implementation of Internet Explorer transition in Internet Explorer, this would be triggered by the declaration of the -ms-transition property, assuming that the arguments match the specification that they implemented.

May I use it , says that IE 10 really implemented the -ms-transition property, as well as the MSDN record, although it is not defined as to which version of IE is implemented in ...

 transition:opacity 1s ease-in-out; // Why do we set this?

We set this up so that once the standard transition implementation is completed and implemented, it will override any vendor-specific temporary implementations

+9
source

Microsoft simultaneously implemented the prefix and prefix versions.

So for your example

 -ms-transition:opacity 1s ease-in-out; // This will never be used because, transition:opacity 1s ease-in-out; // This line will always overwrite it

Check out this jsfiddle in IE10 and you will see that both of them work fine. If you specify both a prefix and a prefix version, the second declaration will take precedence.

+8
source

Source: https://habr.com/ru/post/904810/

More articles:


All Articles