使用元素的属性做动画效果

如何使用JS和CSS3进行动画处理，例如淡入淡出，滑动或仅切换显示和隐藏。

---

JavaScript中的动画并不难实现。 例如，两个函数的行为类似于jQuery的$.fadeIn()和$.fadeOut()

// fade an element from the current state to full opacity in "duration" ms
function fadeOut(el, duration) {
    var s = el.style, step = 25/(duration || 300);
    s.opacity = s.opacity || 1;
    (function fade() { (s.opacity -= step) < 0 ? s.display = "none" : setTimeout(fade, 25); })();
}

// fade out an element from the current state to full transparency in "duration" ms
// display is the display style the element is assigned after the animation is done
function fadeIn(el, duration, display) {
    var s = el.style, step = 25/(duration || 300);
    s.opacity = s.opacity || 0;
    s.display = display || "block";
    (function fade() { (s.opacity = parseFloat(s.opacity)+step) > 1 ? s.opacity = 1 : setTimeout(fade, 25); })();
}
      

这些函数运行良好，您可以使用它们为JavaScript中的任何数值设置动画。 例如，使用元素的高度上下滑动它。 对于跳动，缓动和倒带等高级动画，最好使用经过质量高的的插件，如 TinyAnimations、Velocity 或 GSAP。

但是，将JavaScript用于没有特殊效果的相当简单的动画可能不是最佳选择。 对于诸如淡入淡出，滑动，定位或只是隐藏之类的事情，创建具有CSS3过渡的类并根据需要将这些类添加/删除到元素通常更容易（更快）。

这是一个在CSS3过渡的帮助下幻灯片切换元素的工作演示：

在此示例中，我们利用了plainJS类的助手hasClass(),addClass()和removeClass()。 完成任务的基本JavaScript仅包含一个很小的代码片段：

function toggle(el) {
    hasClass(el, 'is_hidden') ? removeClass(el, 'is_hidden') : addClass(el, 'is_hidden');
}
      

CSS3动画可以在IE 10及以下版本的现代浏览器中运行。通过隐藏/显示该元素，IE 9及以下版本可正常降级。 它不是jQuery animate(）函数的简单替代，但是经过少量的代卖，就可以用非常简单的方法完成惊人的任务。