Overview

要制作fade out 效果只需要设置:

animateOut: 'fadeOut'

fadeOut值只是内置的CSS动画样式。还有一些额外的CSS animations你可以使用。Simply download animate.css library and you are ready to extend Owl with new fancy transitions.

Important

Animate函数只在一个项中工作，并且只在浏览器中支持perspective属性。

如何从animate.css中使用额外的 animation

1. 下载 animate.css
2. 在页面头部引入 animate.css
3. 通过你选择的动画样式名称来设置 animateOut 和 animateIn 参数

$('.custom1').owlCarousel({
    animateOut: 'slideOutDown',
    animateIn: 'flipInX',
    items:1,
    margin:30,
    stagePadding:30,
    smartSpeed:450
});

Example with slideOutDown and flipInX

如何工作?

在开始动画前有三个class被添加到每个项上：

• .animated-添加到In和Out项上 - Animate.css已经被添加到Owl的核心CSS文件中。
• .owl-animated-out - 只添加到Out的项上 - 用它来改变z-index
• .owl-animated-in - 只添加到In的项上 - 用它来改变z-index
• .classNameOut - 只添加到Out的项上 - 这是你在选项中自定义的动画class
• .classNameIn - 只添加到In的项上 - 这是你在选项中自定义的动画class

Part of owl.carousel.css:

/* Feel free to change duration  */ 
.animated  {
  -webkit-animation-duration : 1000 ms  ;
  animation-duration : 1000 ms  ;
  -webkit-animation-fill-mode : both  ;
  animation-fill-mode : both  ;
}  
/* .owl-animated-out - only for current item */ 
/* This is very important class. Use z-index if you want move Out item above In item */ 
.owl-animated-out {
  z-index : 1 
   }
/* .owl-animated-in - only for upcoming item
/* This is very important class. Use z-index if you want move In item above Out item */ 
.owl-animated-in {
  z-index : 0 
   }
/* .fadeOut is style taken from Animation.css and this is how it looks in owl.carousel.css:  */ 
.fadeOut  {
  -webkit-animation-name : fadeOut  ;
  animation-name : fadeOut  ;
}  
@-webkit-keyframes  fadeOut  {
  0% {
    opacity : 1   ;
  }  
  100% {
    opacity : 0   ;
  }  
}
@keyframes  fadeOut  {
  0% {
    opacity : 1   ;
  }  
  100% {
    opacity : 0   ;
  }  
}