php 一些使用animate.css的动画

Posted 2021-05-05

<?php
// The following code is designed to be added to your child theme functions.php
// It adds a new 'Animation Redux' setting under the advanced tab for any module.

add_filter( 'fl_builder_module_custom_class', 'fl_builder_module_custom_class_filter', 10, 2 );
function fl_builder_module_custom_class_filter( $class, $module ) {
	$animate = '';
	if ( ! empty( $module->settings->animation_redux ) ) {
		$animate = ' animated ' . $module->settings->animation_redux;
		wp_enqueue_style( 'animate-css', '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' );
	}
	return $class . $animate;
}

add_filter( 'fl_builder_render_module_settings', 'fl_builder_render_module_settings_filter', 10, 2 );
function fl_builder_render_module_settings_filter( $form, $module ) {

	$form['advanced']['sections']['animation_redux'] = array(
		'title' => 'Animated Redux',
		'fields' => array(
			'animation_redux' => array(
				'type' => 'select',
				'label' => 'Animation Style',
				'options' => array(
					'' => 'None',
					'bounce' => 'bounce',
					'flash' => 'flash',
					'pulse' => 'pulse',
					'rubberBand' => 'rubberBand',
					'shake' => 'shake',
					'swing' => 'swing',
					'tada' => 'tada',
					'wobble' => 'wobble',
					'jello' => 'jello',
					'bounceIn' => 'bounceIn',
					'bounceInDown' => 'bounceInDown',
					'bounceInUp' => 'bounceInUp',
					'bounceOut' => 'bounceOut',
					'bounceOutDown' => 'bounceOutDown',
					'bounceOutLeft' => 'bounceOutLeft',
					'bounceOutRight' => 'bounceOutRight',
					'bounceOutUp' => 'bounceOutUp',
					'fadeIn' => 'fadeIn',
					'fadeInDown' => 'fadeInDown',
					'fadeInDownBig' => 'fadeInDownBig',
					'fadeInLeft' => 'fadeInLeft',
					'fadeInLeftBig' => 'fadeInLeftBig',
					'fadeInRightBig' => 'fadeInRightBig',
					'fadeInUp' => 'fadeInUp',
					'fadeInUpBig' => 'fadeInUpBig',
					'fadeOut' => 'fadeOut',
					'fadeOutDown' => 'fadeOutDown',
					'fadeOutDownBig' => 'fadeOutDownBig',
					'fadeOutLeft' => 'fadeOutLeft',
					'fadeOutLeftBig' => 'fadeOutLeftBig',
					'fadeOutRightBig' => 'fadeOutRightBig',
					'fadeOutUp' => 'fadeOutUp',
					'fadeOutUpBig' => 'fadeOutUpBig',
					'flip' => 'flip',
					'flipInX' => 'flipInX',
					'flipInY' => 'flipInY',
					'flipOutX' => 'flipOutX',
					'flipOutY' => 'flipOutY',
					'fadeOutDown' => 'fadeOutDown',
					'lightSpeedIn' => 'lightSpeedIn',
					'lightSpeedOut' => 'lightSpeedOut',
					'rotateIn' => 'rotateIn',
					'rotateInDownLeft' => 'rotateInDownLeft',
					'rotateInDownRight' => 'rotateInDownRight',
					'rotateInUpLeft' => 'rotateInUpLeft',
					'rotateInUpRight' => 'rotateInUpRight',
					'rotateOut' => 'rotateOut',
					'rotateOutDownLeft' => 'rotateOutDownLeft',
					'rotateOutDownRight' => 'rotateOutDownRight',
					'rotateOutUpLeft' => 'rotateOutUpLeft',
					'rotateOutUpRight' => 'rotateOutUpRight',
					'slideInUp' => 'slideInUp',
					'slideInDown' => 'slideInDown',
					'slideInLeft' => 'slideInLeft',
					'slideInRight' => 'slideInRight',
					'slideOutUp' => 'slideOutUp',
					'slideOutDown' => 'slideOutDown',
					'slideOutLeft' => 'slideOutLeft',
					'slideOutRight' => 'slideOutRight',
					'zoomIn' => 'zoomIn',
					'zoomInDown' => 'zoomInDown',
					'zoomInLeft' => 'zoomInLeft',
					'zoomInRight' => 'zoomInRight',
					'zoomInUp' => 'zoomInUp',
					'zoomOut' => 'zoomOut',
					'zoomOutDown' => 'zoomOutDown',
					'zoomOutLeft' => 'zoomOutLeft',
					'zoomOutUp' => 'zoomOutUp',
					'hinge' => 'hinge',
					'rollIn' => 'rollIn',
					'rollOut' => 'rollOut',
				),
				'preview' => array(
					'type' => 'refresh',
				),
			),
		),
	);
	return $form;
}