lebolo

This is a situation where we do not want transitions to interrupt themselves. Hovering over a filter highlights various circles and clicking on it removes/adds them. To illustrate the problem, click on a filter then quickly move the mouse away.

Details

The circles have an enter transition (filter is checked - come into screen), an exit transition (filter is unchecked - leave screen), and an update transition (filter is hovered over - highlight element).

Since we're using the same control to enter/exit/highlight (i.e. checkboxes), whenever the user unchecks a filter and then moves the mouse away, the highlight transition cancels the exit transition and the circle sticks around in the state it was when it got interrupted.

Looking for a way to chain the highlight transition so that it doesn't cancel the exit transition. Can't use transition.each or transition.transition methods because the elements selected by the exit transition may not be the same as those selected by the highlight transition (e.g.

lebolo

<template>
  <require from="./item"></require>
  <require from="./hideCompletedValueConverter"></require>
  <ol>
    <li>Click the first checkbox</li>
    <li>Notice that isCompleted bindings disagree with each other.</li>
    <li>Go to item.js and uncomment bind().</li>
    <li>Click the first checkbox</li>
    <li>Notice the issue is gone...</li>
    <li>What is going on?</li>

lebolo

<template>
  <input value.bind="foo"></input>
  <h1>${qux}</h1>
</template>

lebolo

<template>
  <h1>${message}</h1>
  <div class="page-host">
    <router-view name="left"></router-view>
  </div>
  <div class="page-host">
    <router-view name="right"></router-view>
  </div>
</template>

lebolo

<template>
  <h1>${message}</h1>
  <div class="page-host">
    app
    <router-view name="left"></router-view>
  </div>
  <div class="page-host">
    app
    <router-view name="right"></router-view>
  </div>

lebolo

<template>
  <h1>${message}</h1>
</template>

lebolo

<template>
  <h1>${message}</h1>
</template>

lebolo

<template>
  <require from="./my-element"></require>
  <my-element>
    <div slot="foo">Hi</div>
    
    <thead slot="head">
      <tr>
        <th>Foo</th>
        <th>Bar</th>
      </tr>

lebolo

<template>
  <require from="./my-element"></require>
  <named-slot>
  <div slot="slot1">
    This Goes in Slot 1
  </div>

  <div slot="slot2">
    This Goes in Slot 2
  </div>

lebolo

<template>
  <require from="./my-element"></require>
  <name-tag>
    Ralphie
  </name-tag>
</template>