<commit_before><h1 class="doc-page-title">CSS animations</h1>

<p>
  Want to add some fancy effects to your selects when they open and close?
  Ember Power Select has you covered!
</p>

<p>
  When opening and closing the selects EPS adds some utility classes to the <code>.ember-power-select-dropdown</code>
  element that you can target to perform your CSS vodoo.
</p>
<p>The lifecycle of those clases is:</p>
<ul>
  <li>
    After the <code>.ember-power-select-dropdown</code> has been added to the DOM, it receives a
    <code>.ember-basic-dropdown--transitioning-in</code> class.
  </li>
  <li>
    Once all opening animations or transitions have finished, <code>.ember-basic-dropdown--transitioning-in</code> is
    replaced by <code>.ember-basic-dropdown--transitioned-in</code>.
  </li>
  <li>
    When closed, EPS replaces its content with a close and adds a <code>.ember-basic-dropdown--transitioning-out</code> to it.
  </li>
  <li>
    Once all closing animations or transitions have finished, the "ghost" clone is finally removed.
  </li>
  <li>
    If you don't have animations nor transitions, most of this work is skipped.
  </li>
</ul>

<p>
  So, what do you have to do to enable this? Nothing, just add some <strong>animation</strong> with CSS.
<p>
</p>
  Note that you have to use CSS animations, <strong>this approach doesn't work with CSS transitions.</strong>
</p>

<p>Lets add some slide and fade in animation to a select that uses the bootstrap theme.</p>

{{#code-example hbs="css-animation-1.hbs" css="css-animation-1.scss" as |partialName|}}
  {{partial partialName}}
{{/code-example}}

<p>
  Now that you can add animations, the first rule of animations is use them with caution, and if you
  decide that it worth adding them, keep them short. Almost any animation over a third of a second
  is probably too long.
</p>

<p>
  Now lets dive in something more serious. Debounding searches.
</p><commit_msg>close -> clone (#1176)<commit_after><h1 class="doc-page-title">CSS animations</h1>

<p>
  Want to add some fancy effects to your selects when they open and close?
  Ember Power Select has you covered!
</p>

<p>
  When opening and closing the selects EPS adds some utility classes to the <code>.ember-power-select-dropdown</code>
  element that you can target to perform your CSS vodoo.
</p>
<p>The lifecycle of those clases is:</p>
<ul>
  <li>
    After the <code>.ember-power-select-dropdown</code> has been added to the DOM, it receives a
    <code>.ember-basic-dropdown--transitioning-in</code> class.
  </li>
  <li>
    Once all opening animations or transitions have finished, <code>.ember-basic-dropdown--transitioning-in</code> is
    replaced by <code>.ember-basic-dropdown--transitioned-in</code>.
  </li>
  <li>
    When closed, EPS replaces its content with a clone and adds a <code>.ember-basic-dropdown--transitioning-out</code> to it.
  </li>
  <li>
    Once all closing animations or transitions have finished, the "ghost" clone is finally removed.
  </li>
  <li>
    If you don't have animations nor transitions, most of this work is skipped.
  </li>
</ul>

<p>
  So, what do you have to do to enable this? Nothing, just add some <strong>animation</strong> with CSS.
<p>
</p>
  Note that you have to use CSS animations, <strong>this approach doesn't work with CSS transitions.</strong>
</p>

<p>Lets add some slide and fade in animation to a select that uses the bootstrap theme.</p>

{{#code-example hbs="css-animation-1.hbs" css="css-animation-1.scss" as |partialName|}}
  {{partial partialName}}
{{/code-example}}

<p>
  Now that you can add animations, the first rule of animations is use them with caution, and if you
  decide that it worth adding them, keep them short. Almost any animation over a third of a second
  is probably too long.
</p>

<p>
  Now lets dive in something more serious. Debouncing searches.
</p>
{'fraction_non_alphanumeric': 0.1134073882717644, 'fraction_numerical': 0.003099974166881943, 'mean_word_length': 3.727716727716728, 'pattern_counts': {'":': 0, '<': 95, '<?xml version=': 0, '>': 96, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '258270', 'n_tokens_mistral': 1209, 'n_tokens_neox': 1175, 'n_words': 505}