Overview

瑕佸埗浣渇ade out 鏁堟灉鍙渶瑕佽缃?

animateOut: 'fadeOut'

fadeOut鍊煎彧鏄唴缃殑CSS鍔ㄧ敾鏍峰紡銆傝繕鏈変竴浜涢澶栫殑CSS animations浣犲彲浠ヤ娇鐢ㄣ€係imply download animate.css library and you are ready to extend Owl with new fancy transitions.

Important

Animate鍑芥暟鍙湪涓€涓」涓伐浣滐紝骞朵笖鍙湪娴忚鍣ㄤ腑鏀寔perspective灞炴€с€?/p>

濡備綍浠?code>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

濡備綍宸ヤ綔?

鍦ㄥ紑濮嬪姩鐢诲墠鏈変笁涓猚lass琚坊鍔犲埌姣忎釜椤逛笂锛?/p>

• .animated-娣诲姞鍒癐n鍜孫ut椤逛笂 - Animate.css宸茬粡琚坊鍔犲埌Owl鐨勬牳蹇僀SS鏂囦欢涓€?/li>
• .owl-animated-out - 鍙坊鍔犲埌Out鐨勯」涓?- 鐢ㄥ畠鏉ユ敼鍙榸-index
• .owl-animated-in - 鍙坊鍔犲埌In鐨勯」涓?- 鐢ㄥ畠鏉ユ敼鍙榸-index
• .classNameOut - 鍙坊鍔犲埌Out鐨勯」涓?- 杩欐槸浣犲湪閫夐」涓嚜瀹氫箟鐨勫姩鐢籧lass
• .classNameIn - 鍙坊鍔犲埌In鐨勯」涓?- 杩欐槸浣犲湪閫夐」涓嚜瀹氫箟鐨勫姩鐢籧lass

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   ;
  }  
}