add_control( * 'hover_animation', * [ * 'label' => __( 'Hover Animation', 'plugin-domain' ), * 'type' => Controls_Manager::HOVER_ANIMATION, * 'prefix_class' => 'elementor-animation-', * ] * ); * * PHP usage (inside `Widget_Base::render()` method): * * echo '
...
'; * * JS usage (inside `Widget_Base::_content_template()` method): * *
...
* * @since 1.0.0 * * @param string $label Optional. The label that appears above of the * field. Default is empty. * @param string $description Optional. The description that appears below the * field. Default is empty. * @param string $default Optional. The selected animation key. Default is * empty. * @param string $separator Optional. Set the position of the control separator. * Available values are 'default', 'before', 'after' * and 'none'. 'default' will position the separator * depending on the control type. 'before' / 'after' * will position the separator before/after the * control. 'none' will hide the separator. Default * is 'default'. * @param bool $show_label Optional. Whether to display the label. Default is * true. * @param bool $label_block Optional. Whether to display the label in a * separate line. Default is true. */ class Control_Hover_Animation extends Base_Data_Control { /** * Animations. * * Holds all the available hover animation effects of the control. * * @access private * @static * * @var array */ private static $_animations; /** * Retrieve hover animation control type. * * @since 1.0.0 * @access public * * @return string Control type. */ public function get_type() { return 'hover_animation'; } /** * Retrieve animations. * * Get the available hover animation effects. * * @since 1.0.0 * @access public * @static * * @return array Available hover animation. */ public static function get_animations() { if ( is_null( self::$_animations ) ) { self::$_animations = [ 'grow' => 'Grow', 'shrink' => 'Shrink', 'pulse' => 'Pulse', 'pulse-grow' => 'Pulse Grow', 'pulse-shrink' => 'Pulse Shrink', 'push' => 'Push', 'pop' => 'Pop', 'bounce-in' => 'Bounce In', 'bounce-out' => 'Bounce Out', 'rotate' => 'Rotate', 'grow-rotate' => 'Grow Rotate', 'float' => 'Float', 'sink' => 'Sink', 'bob' => 'Bob', 'hang' => 'Hang', 'skew' => 'Skew', 'skew-forward' => 'Skew Forward', 'skew-backward' => 'Skew Backward', 'wobble-vertical' => 'Wobble Vertical', 'wobble-horizontal' => 'Wobble Horizontal', 'wobble-to-bottom-right' => 'Wobble To Bottom Right', 'wobble-to-top-right' => 'Wobble To Top Right', 'wobble-top' => 'Wobble Top', 'wobble-bottom' => 'Wobble Bottom', 'wobble-skew' => 'Wobble Skew', 'buzz' => 'Buzz', 'buzz-out' => 'Buzz Out', ]; } return self::$_animations; } /** * Render hover animation control output in the editor. * * Used to generate the control HTML in the editor using Underscore JS * template. The variables for the class are available using `data` JS * object. * * @since 1.0.0 * @access public */ public function content_template() { $control_uid = $this->get_control_uid(); ?>
<# if ( data.description ) { #>
{{{ data.description }}}
<# } #> true, ]; } }