淡入淡出 [英] FadeIn vs FadeTo

查看：67
本文介绍了淡入淡出的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的网站使用Google地图。地图本身应该在完全加载后显示。这是fadeIn（）应该开始将不透明度从0增加到100％。

出于某种原因，fadeIn（）不会执行任何操作，而fadeTo（）适用于我。
我之前使用过fadeIn，但从来没有见过它的行为 - 也许我正在盯着文档太久。



  var map = new google.maps.Map（document.getElementById（'map'），{center：{lat：-34.397，lng：150.644}，zoom：8} ）; google.maps.event.addListenerOnce（map，'idle'，div_fadein）; //不要在每个* map上调用回调movefunction div_fadein（）{$（＃map）。fadeTo（600，1） ; //<  -  Works //$(\"#map\").fadeIn(800）; //<  - 不起作用}

＃ map {height：350px;宽度：500px;边框：1px纯黑色;不透明度：0;过滤器：alpha（不透明度= 0）; / *对于IE8和更早版本* /;}

< div id =map>< / div>< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs>< / script>

>

我回答：都不是！



你只想淡入一个元素; 2017年！

多年来，我们不再需要用js来完成那些非常简单的任务。当然，在某些情况下，您应该使用js（-frameworks，-libraries，-platforms），但前提是它是关于具有复杂序列和/或广泛用户交互功能的细粒度设置。如果您遇到这种情况：请勿将jQuery用于动画部分！对于复杂的动画内容，您可以使用 GSAP （喜欢它并使用它很多）， Velocity.js 或其他专为动画设计的内容。



jQuery非常棒（例如Deffered / Promise和Ajax的东西，我也使用jQuery.type（）很多），但它从来没有被设计成在动画中做至少非常好的工作（关键字RAF ）。但回到主题：


  1. 你的问题是关于风格（ opacity ） - CSS是关于style的，你的问题是关于改变状态（又名事件） - 只有这是js部分。

所以让我们重新构建（只是一个粗略的模型，参见高级PEN 或下面的代码段）： 让我们在状态标记 

 <！ -  states are：transparent and opaque  - > 
< div id =mapclass =state state  -  off>< / div> 
<！ - 与< div id =mapclass =state state  -  on>< / div> - >



CSS |将样式保留在它所属的位置



  / *不同状态|请考虑这是如何可重用的* / 
 .state {
 -webkit-transition：全部2s缓入; 
转换：全部2s缓出; 
} 
 .state.state  -  off {
 opacity：0; / * WYSIWYG * / 
} 
 .state.state  -  on {
 opacity：1; / *非常干净和直接前进* / 
}

。



JS |将一些逻辑放在一起以部署不同的状态

  // BTW：没有jQuery依赖关系，也没有样式
 var domMap = document.getElementById（'map'）; //缓存DOMelement 
 google.maps.event.addListenerOnce（//听一次！
 
 new google.maps.Map（
 domMap，
 {center：{ lat：-34.397，lng：150.644}，zoom：8} 
），
 $ b'b'idle'，
 
 function（）{//切换匿名状态回调函数
 domMap.className ='state state  -  on'; 
} 
 
）; 
  

  var domMap = document.getElementById（'map'）; google.maps.event.addListenerOnce（new google.maps.Map（domMap，{center：{lat：-34.397，lng：150.644}，zoom：8 }），'idle'，function（）{//回调domMap.className ='state state  -  on'; / * jQuery方式：$（domMap）.attr（'class'，''）or * $（ domMap）.toggleClass（'state-on state-off'）*后者对于通用的无需切换的函数是一个好的选择* function toggleState（sSelector）{* return $（sSelector）.toggleClass（' ）;}}然后可以调用toggleState（'＃map'）* /}）;  

  #map {border：1px solid black; height：350px; width：500px;}。state {-webkit-transition：全部2s缓入; transition：所有2s缓入;}。state.state  -  off {opacity：0; / *非常干净直接* /}。state.state  -  on {opacity：1; / * WYSIWYG * /}

< div id = mapclass =state state - off>< / div>< script src =https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs>< / script> ;



笔记




  • 状态的通用类名称比特定类型更好。为什么？想象一下，你想改变你的动画从淡入淡出。如果你的班级名称是透明的，透明的，你会发现自己搜索并将透明替换为上，不透明替换为下（或其他）。你必须搜索和替换hmtl，css和js。在开和关的情况下，您不必改变任何东西，只要到样式应该发生的地方（您的样式表），并重新定义什么意思是开和关立即关闭您和您的用户。

  • 必读。

  • 查看 animates.css ，如果您还没有。




我可以使用吗？关于跨浏览器的情况<？ / h2>

<93>（93.59％）至少对于这个特别的人来说，应该忘记这一点。不支持
css3转换的浏览器会给出亚胺化响应，而不是动画响应，这也很好。如果您想提供回退功能，您可以检测其是否需要使用 Modernizr 并提供js后备。如果你这样做：保持简单，也许会寻找一些（不是很多）功能强大的工具，你可以随时处理。如果你想使用jQuery来设置动画效果，请尝试：

$（'＃map'）。animate（{opacity：1}，2000）！像charme一样工作 - 见下面的代码片段。



var domMap = document.getElementById（'map'）; google.maps.event.addListenerOnce（new google.maps.Map（domMap，{center：{lat：-34.397，lng：150.644}，zoom：8}），'idle '，function（）{// callback $（domMap）.animate（{opacity：1}，2000）}）; 

  #map {border：1px solid black; height：350px;不透明度：0; width：500px;}

< div id =map >< / div>< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script><脚本SRC = https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs >< /脚本>


$ h
$ b

结论



不要浪费你的时间弄清楚如何处理别人对一般功能的实现。同样对于我来说，很难调试这个jQuery fadeIn - fadeTo实现！

所以下一次就是设计一个元素的状态。给它一个适当的类名，然后设计你的下一个状态，命名它。并通过js切换这些状态。这应该适用于很多用例！

选择elegenat，简单，可理解和可维护的解决方案。如果您发现自己受到黑客攻击，请稍事休息并尝试恢复基本操作。 我的第一个回答|被接受的：）



var $ map = $（＃map）; // cache elementgoogle.maps.event.addListenerOnce（// listen once！new google.maps.Map（$ map [0]，{center：{lat：-34.397，lng：150.644}，zoom：8}），'' （）;}} //函数（）{//回调函数$（＃map）.css（{display：'none'，opacity：1}）//这行很破解，伤害.fadeIn（1800） ;

#map {height：350px;宽度：500px;边框：1px纯黑色;不透明度：0;过滤器：alpha（不透明度= 0）; / *对于IE8和更早版本* /; }

< div id =map><<< ; / div>< script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< script src =https ：//maps.googleapis.com/maps/api/js键= AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs>< /脚本>


My site makes use of Google maps. The map itself should be displayed once completely loaded. This is where fadeIn() should begin to increase opacity from 0 to 100%.

For some reason, fadeIn() does not do anything, whereas fadeTo() works for me. I have used fadeIn before but never seen it behave this way - maybe I was staring at the docs for too long.

var map = new google.maps.Map(document.getElementById('map'),
{
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
});

google.maps.event.addListenerOnce(map, 'idle', div_fadein);
// Don't invoke callback on *every* map move

function div_fadein()
{
    $("#map").fadeTo(600, 1);               // <-- Works
    //$("#map").fadeIn(800);                // <-- Doesn't work
}

#map
{
    height: 350px;
    width: 500px;
    border: 1px solid black;
    opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */;
}

<div id="map"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>

解决方案

The Question: FadeIn vs FadeTo (which to prefer)?

MY Answer: Neither!

Come on :) you just want to fade in an element; It's 2017!
We don't have to do those very simple tasks with js anymore for years. Of course there are circumstances where you should use js (-frameworks, -libraries, -platforms) but only if it is about fine grained setups with complex sequences and/or extensive user interaction capabilities. And if you ever come accross such a scenario: don't use jQuery for the animation part! For complex animation stuff you can use GSAP (love it and use it a lot), Velocity.js or whatever is designed particularly for animations.

jQuery is great (eg the Deffered/Promise and Ajax stuff, i also use jQuery.type() a lot) but it was never designed to do an at-least-very-good-job in animation (keyword RAF). But back to topic:

  1. your question is about style (opacity) - CSS is about style,
  2. your question is about changing states (aka events) - and only this is the js part.

So let's reconstruct (just a rough mockup see advanced PEN or Snippet below):

HTML | let's markup in states

<!-- states are: transparent and opaque -->
<div id="map" class="state state--off"></div>
<!-- compare to <div id="map" class="state state--on"></div> -->

CSS | Keep styling where it belongs to

/* the different states | please consider how reusable this is */
.state { 
    -webkit-transition: all 2s ease-in-out; 
    transition: all 2s ease-in-out;
}
.state.state--off {
    opacity: 0; /* WYSIWYG */
}
.state.state--on {
    opacity: 1; /* very clean and straight forward */
}

That's pretty much it.

JS | throw together some logic to deploy the different states

// BTW: no jQuery dependency and no styling at all as well
var domMap = document.getElementById('map'); // cache DOMelement
google.maps.event.addListenerOnce( // listen once!

  new google.maps.Map(
    domMap,
    { center: {lat: -34.397, lng: 150.644}, zoom: 8 }
  ),

  'idle',

  function() { // toggle state in anonymous callback function
    domMap.className = 'state state--on';
  }

);


var domMap = document.getElementById('map');
google.maps.event.addListenerOnce(

  new google.maps.Map(
    domMap,
    { center: {lat: -34.397, lng: 150.644}, zoom: 8 }
  ),

  'idle',

  function() { // callback
    domMap.className = 'state state--on';
    /* the jQuery way: $(domMap).attr('class', '') or
     * $(domMap).toggleClass('state--on state--off')
     * the latter would be a good one for a generic no brainer toggle function
     * function toggleState( sSelector ) {
     *   return $(sSelector).toggleClass('state--on state--off');
     * }
     * and then one can call toggleState('#map')
     */
  }

);

#map {
    border: 1px solid black;
    height: 350px;
    width: 500px;
}
.state { 
    -webkit-transition: all 2s ease-in-out; 
    transition: all 2s ease-in-out;
}
.state.state--off {
    opacity: 0; /* very clean and straight forward */
}
.state.state--on {
    opacity: 1; /* WYSIWYG */
}

<div id="map" class="state state--off"></div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>

Notes

  • Generic class names for states are better then specific ones. Why? Imagine you want to change your animation from fading in to slide down. If your class name is something like state--transparent and state-opaque - you will find yourself search&replace "transparent" to "up" and "opaque" to "down" (or whatever). And you have to search&replace in hmtl, css and js. With "on" and "off" you don't have to change anything but go to the place where the styling should happen (your styleheets) and redefine what means "on" & "off" to you and your users now.
  • Must-Read.
  • Have a look at animates.css if you haven't already.

Can I use? What About Cross-browser?

(93.59%) Forget about this at least for this particular one. Browsers who don't support css3 transition will give imidiate response instead of animated response which is also fine. If you want to provide a fallback you can detect whether its nessecary or not with Modernizr and provide js fallbacks. If you do so: keep it simple and perhaps look for some (not many) powerful tools that you can handle over time. If you want to animate with jQuery then try:
$('#map').animate({opacity: 1}, 2000)! Works like a charme - see snippet below.

var domMap = document.getElementById('map');
google.maps.event.addListenerOnce(

  new google.maps.Map(
    domMap,
    { center: {lat: -34.397, lng: 150.644}, zoom: 8 }
  ),

  'idle',

  function() { // callback
    $( domMap ).animate({ opacity: 1}, 2000 )
  }

);

#map {
    border: 1px solid black;
    height: 350px;
    opacity: 0;
    width: 500px;
}

<div id="map"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>

Conclusion

Don't waste your time figuring out how to handle someone elses implementation of a generic functionality. Also for me it was hard to debug this jQuery fadeIn - fadeTo implementation!
So next time just design a state of an element. Give it an appropriate class name then design your next state, name it. and switch those states via js. This should work for a lot of use cases!
Prefer solutions that are elegenat, simple, comprehensible and maintainable. If you find yourself hacking then take a break and try to get back to the basics.

My First Answer | The one that was accepted :)

var $map = $("#map"); // cache element

google.maps.event.addListenerOnce( // listen once!

  new google.maps.Map(
    $map[0],
    { center: {lat: -34.397, lng: 150.644}, zoom: 8 }
  ),

  'idle',

  function() { // callback
    $("#map")
      .css({display: 'none', opacity:1}) // this line is so hacky that it hurts
      .fadeIn(1800);
  }

);

#map {
    height: 350px;
    width: 500px; 
    border: 1px solid black; 
    opacity: 0;
    filter: alpha(opacity=0); /* For IE8 and earlier */;    
}

<div id="map"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDAyvHRW1gtIv3XOjSWN_Gngb9tz2cNJjs"></script>

这篇关于淡入淡出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆