Good day Petter.

The addon working great but when i try to animate component and inside it ember-cli-swiper component will not work.

when i remove ember-cli-swiper component every thing work fine.

Best Regards

When you use a paper-menu from the ember-paper add-on, the menu doesn’t disappear anymore when that add-on is also installed. The bug seems to be related to Ember Paper’s backdrop component.

ember-cli: 2.4.3
node: 4.0.0
os: darwin x64

Could not require 'ember-cli-build.js': Cannot find module 'ember-cli/lib/broccoli/ember-addon'

Hi guys; love the library, however, I was wondering if you would be open to a PR that enables us to roll our own computeTimeout Logic, I know I can override the function, but its marked as private so I would prefer a sanctioned path.

The reason I'm asking is because there are times when I am actually animating child elements, but the parent element gets destroyed before the child elements are finished with their animations.

So far I have been getting around it by defining a transition on some bogus property at the parent element level. It would be cool to be able to write your own logic that computes timeout based on child elements etc.

Reported in sentry.io app, the following error occurred:

Cannot read property 'classList' of undefined

Here:

   removeClass: function removeClass(className, element) {
      if (!this.get('isDestroying')) {
        this.get('transitionClasses').removeObject(className);
      } else {
        element.classList.remove(className);
      }
    },

Called from:

        if (animationType === 'remove') {
          _this.removeClass(transitionClass);
        }

The caller does not pass element.

This addon is outdated with the recent Ember versions

[email protected]:
  version "0.1.10"
  resolved "https://registry.yarnpkg.com/ember-css-transitions/-/ember-css-transitions-0.1.10.tgz#483d45e273e30f88bf98faa2a4a9dadf02d0d67c"
  dependencies:
    ember-cli-babel "^5.1.6"

$> ember -v

ember-cli: 2.14.1
node: 8.2.1
os: darwin x64

When it comes to the exit transitions, this works:

<div {{css-transition ...}}>
  // Content
</div>

However, this does not work:

<div class="something">
  <div {{css-transition ...}}>
    // Content
  </div>
</div>

ember-modifier v3.2 introduced new deprecations which will also be triggered by the css-transition modifier in this addon.
The migration guide can be found here.

If I have an element in a conditional block with Ember-cli 3.16.1 if I apply {{css-transition}}, I get a crash in the ember-css-transition library somewhere.

css-transition.js:126 Uncaught (in promise) TypeError: Cannot read property 'insertBefore' of null at CssTransitionModifier.addClone (css-transition.js:126) at CssTransitionModifier.willRemove (css-transition.js:67) at ClassBasedModifierManager.destroyModifier (modifier-manager.js:38) at CustomModifierState.destroy (index.js:7052) at StringDestroyableDestructor.[DID_DROP] (util.js:355) at util.js:304 at Set.forEach (<anonymous>) at SnapshotDestructor.[DID_DROP] (util.js:304) at TransactionImpl.commit (runtime.js:1655) at EnvironmentImpl.commit (runtime.js:1803)

It's basically making it unusable, much appreciate a fix

Using concat helper on a transition elements class attribute breaks enter transition for that element.

eg

class={{concat
          this.customClass
          "my-other-classes"
        }}
        {{css-transition
          enterClass="opacity-0"
          enterActiveClass="transition-opacity duration-500 delay-150 ease-out"
          enterToClass="opacity-100"
          leaveClass="opacity-100"
          leaveActiveClass="transition-all duration-500 ease-in"
          leaveToClass="opacity-0"
        }}
        ```

First of all, thank you for this addon.

For building general components, it would be awesome to be able to disable animations per user's request.

For example, we might have a component that has an argument isAnimationEnabled, to be able to support this, we need to duplicate all the markup to a version that has the modifier and another that does not have the modifier.

{{#if @isAnimationEnabled}}
  <div {{css-transition "example"}}>Something</div>
{{else}}
  <div>Something</div>
{{/if}}

With the ability to disable the animation, this could be refactored to:

<div {{css-transition "example" isEnabled=@isAnimationEnabled}}>Something</div>

Thanks.

Support for passing multiple classes is missing. Even though transitionClass is an array, there is no way to pass multiple classes from the template.

This currently does not work

{{#transition-group transition-class="slide-out fade-in"}}
...
{{/transition-group}}

Can't seem to find a changelog entry for v4.
Other than the fact that this is now a v2 addon, are there any other notable changes one should be aware of?

Basically, inited brand new ember 3.3.0 app, and the enter transition does not work. It just jumps in. Exit transition works nice and smooth as expected.

Enclosing code snippets below. EmberTwiddle seems to be not working right now with addons... code snippets below.

Screen capture
https://i.imgur.com/TXOfHqz.mp4

Route

import Route from '@ember/routing/route';

export default Route.extend({
    actions: {
        toggleShow() {
          this.controller.set('show', !this.controller.get('show'));
        }
      }
});

Template

<button class="btn btn-lg btn-primary" {{action "toggleShow"}}>Press me</button>

{{#if show}}
  {{#transition-group transition-class="exampletwo"}}
    <div class="well">
      <h1>I am using  <code>transition-group</code> component.</h1>
    </div>
  {{/transition-group}}
{{/if}}

CSS

.exampletwo-enter {
    opacity: 0.01;
  }
  
  .exampletwo-enter.exampletwo-enter-active {
    opacity: 1;
    transition: opacity .5s ease-in;
  }
  .exampletwo-leave {
    opacity: 1;
  }
  
  .exampletwo-leave.exampletwo-leave-active {
    opacity: 0.01;
    transition: opacity .5s ease-in;
  }

It would be great if we could pass our CSS animation classes as named arguments like so:

<div
  {{css-transition
    enter="opacity-0"
    enterActive="ease-out duration-200 opacity-100"
    leave="opacity-100"
    leaveActive="opacity-0 ease-in duration-200"
  }}
>
...
</div>

I build many of my apps with TailwindCSS and this would be incredibly helpful :)

Can't test whether an element has been successfully shown and hidden in an acceptance if you add a transition to show/hide it using this addon. This is because the tests don't wait for CSS3 transitions to complete.

Either need to register a test waiter that completes on the transition complete events or exclude the transitions during test when Ember.testing is true.

I have a situation where I show/hide a parent element based on a boolean, and then I animate some child elements in/out.

When the parent element is shown, the child elements properly animate in. However, when the parent element is removed, the child elements don't have time to animate out.

I previously worked around this by using properties as a trigger to start the child animations, and then using the didTransitionOut to determine when to remove the parent element, but it seems like the newer version has removed the ability to control the animations via a property.

Hi there,

I spent some time figuring out an issue while trying to use ember-css-transitions with an example from Tailwind UI.

I copied the code from their site and the comment stated the following:

<!--
  Dropdown menu, show/hide based on menu state.

  Entering: "transition ease-out duration-100"
    From: "transform opacity-0 scale-95"
    To: "transform opacity-100 scale-100"
  Leaving: "transition ease-in duration-75"
    From: "transform opacity-100 scale-100"
    To: "transform opacity-0 scale-95"
-->

So naturally what I did was the following:

{{#if this.isOpen}}
  <div
    class="... some tw classes ..."
    role="menu"
    aria-orientation="vertical"
    aria-labelledby="menu-button"
    tabindex="-1"
    {{css-transition
      enterActiveClass="transition ease-out duration-100"
      enterClass="transform opacity-0 scale-95"
      enterToClass="transform  opacity-100 scale-100"
      leaveActiveClass="transition ease-in duration-75"
      leaveClass="transform opacity-100 scale-100"
      leaveToClass="transform opacity-0 scale-95"
    }}
  >
    {{!-- content here --}}
  </div>
{{/if}}

And for some reason the opacity change was working but not the scaling.

It took some investigation but I believe that the part of the code that adds/removes classes breaks this as it adds the leaveToClass and then removes the leaveClass. Since transform is present in both, it gets removed and the scale is thus not applied.

See https://github.com/peec/ember-css-transitions/blob/master/addon/modifiers/css-transition.js#L218-L219

I don't know if there's any risk of introducing a bug by reversing the order but I think it would solve this.

In the mean time the simple workaround is to move transform to leaveActiveClass but I preferred opening an issue as it's pretty counter-intuitive.

Thanks for this addon. Let me know if I can be of any help.

❤️

Description

Importing functions from transition utils, like described in the docs, doesn't work after version 4.0.0.
I'm not sure if this is intended, but if someone can confirm this should still be working, I can open a PR to fix it.

How to reproduce

1. Add import { nextTick } from 'ember-css-transitions/utils/transition-utils';
2. Run ember s
3. Should result in webpack returned errors to ember-auto-import

Source

The utils folder is not being defined as a public entry point in the rollup config file.

So the current mixin helps with rendering and tearing down, but there is no way to watch classes and their transition times to do .my-class-add when a class was added or .my-class-remove when removed along with an active state for each.

I think this needs a need mixin.

The example code provided

<div {{css-transition "example"}}>
  <h1>Hello world</h1>
</div>

doesn't work in Ember Octane, would be awesome to provide an octane example for newbies.

Thanks a lot !

It seems the vendor.js file can't be parsed or something to that extent.

I plan to browser test this in many platforms and do some cleanups to more CP's and ember way. ATM this is the list:

•  Write more tests

Tested in the following browsers / platforms:

• IE 10
• IE 11
• Microsoft Edge
• Chrome
• Firefox
• Safari
• Android
• iPhone

Note: IE9 does not support CSS3 transitions / animations. They must live with no animations / transitions.

https://github.com/peec/ember-css-transitions/blob/e1a3dd81f9cce238f078de29858bb0ff206ee8f7/addon/mixins/transition-mixin.js#L217-L224

This bit of code assumes one of two things is true:

1. Per the comment, that this.element further back up the chain is a jQuery item (in our app, it's not!) or…
2. That it's running on a browser that isn't IE11, since everything else has supported Node.remove since 2014.

This gave us a bug in production today (thankfully, affecting only a small number of users).

Our workaround was to polyfill it as suggested by MDN. Shipping the polyfill (possibly as an opt-in for people who need to target IE11?) seems like it might be the best solution?

When using either the mixin or the component version, the teardown removes the component but not the DOM clone, leaving a copy behind each time something like a toggle happens.

HI,

With node version 12, and 3.19.0 and 3.17 it crashes in the build for ember-css-transitions 1.1.0, but not 1.0.1.
Build Error (broccoli-persistent-filter:Babel > [Babel: ember-css-transitions]) in ember-css-transitions/modifiers/css-transition.js

function(router) {} could not be cloned.

Thanks. APologies I posted this and closed it already but it was because node 10 actually works still, and it threw me off on another machine when it appeared to work until I realised the node version is different.

The latest stuff breaks in the build. Just spent a day fighting the strangest output errors in the end it came down to ember-css-transitions. This is against 3.17 but 3.19 has the same issue.

"ember-css-transitions": "1.1.0",

Offline Data Folder: /roomviewer-articad3/data-articad3
Development
Build Error (broccoli-persistent-filter:Babel > [Babel: ember-css-transitions]) in ember-css-transitions/modifiers/css-transition.js

function(router) {} could not be cloned.

Stack Trace and Error Report: C:\Users\BENGLA~1\AppData\Local\Temp/error.dump.5cb52bcfecc8b07dde9409de2844ed73.log

but "ember-css-transitions": "1.0.1" still works.

Hi, I've had a few challenges getting the Addon working with Tailwind classes. I've cracked it now but I just wanted to check-in to see if there's a pattern that could be teased out in the documentation.

I recently added a slide over component to a project, using code taken directly from TailwindUI. In the code's documentation these were the instructions for adding a transition:

<!--
  Slide-over panel, show/hide based on slide-over state.

  Entering: "transform transition ease-in-out duration-500 sm:duration-700"
    From: "translate-x-full"
    To: "translate-x-0"
  Leaving: "transform transition ease-in-out duration-500 sm:duration-700"
    From: "translate-x-0"
    To: "translate-x-full"
-->

Accordingly, for my component, I used the Addon in this way:

  {{css-transition
    enterClass="transform transition ease-in-out duration-500 sm:duration-700"
    enterActiveClass="translate-x-full"
    enterToClass="translate-x-0"
    leaveClass="transform transition ease-in-out duration-500 sm:duration-700"
    leaveActiveClass="translate-x-0"
    leaveToClass="translate-x-full"
    didTransitionOut=@didTransitionOut
    didTransitionIn=@didTransitionIn
  }}

It didn't work. The component just appeared and vanished with no translation at all. After a bit of playing around, I got it working with the following:

  {{css-transition
    enterClass="translate-x-full"
    enterActiveClass="transform transition ease-in-out duration-500 sm:duration-700"
    enterToClass="translate-x-0"
    leaveClass="translate-x-0"
    leaveActiveClass="transform transition ease-in-out duration-500 sm:duration-700"
    leaveToClass="translate-x-full"
    didTransitionOut=@didTransitionOut
    didTransitionIn=@didTransitionIn
  }}

Based on this, and in terms of a pattern other can follow, am I right in thinking that Tailwind's documents map to the Addon's API like so?:

Entering => enterActiveClass
From => enterClass
To => enterToClass
Leaving => leaveActiveClass
From => leaveClass
To => leaveToClass

Many thanks for your time and help 😁