update readme. remove tests on 3.8

miguelcobain · Dec 29, 2019 · a5d93c3 · a5d93c3
1 parent be11086
commit a5d93c3
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 72 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -49,7 +49,7 @@ jobs:
 
     # we recommend new addons test the current and previous LTS
     # as well as latest stable release (bonus points to beta/canary)
-    - env: EMBER_TRY_SCENARIO=ember-lts-3.8
+    # - env: EMBER_TRY_SCENARIO=ember-lts-3.8
     - env: EMBER_TRY_SCENARIO=ember-lts-3.12
     - env: EMBER_TRY_SCENARIO=ember-release
     - env: EMBER_TRY_SCENARIO=ember-beta

diff --git a/README.md b/README.md
@@ -37,35 +37,13 @@ Animations are completely based on CSS classes. As long as you have a CSS class
 }
 ```
 
-### Animating insert and destroy
-
-There are two ways of defining enter/leave transitions,
-If you use the `{{transition-group}}` component you can then do something like this ( there is also a mixin you can use for custom components):
-
-```handlebars
-{{#if shouldShowThis}}
-  {{#transition-group transitionName="example"}}
-    This is animated in.
-  {{/transition-group}}
-{{/if}}
-```
-
-`ember-css-transitions` will automatically manage the lifecycle of the css classes applied so that it makes the animation on `didInsertElement` and `willDestroyElement`.
-It adds `yourclass-enter` suffix and `yourclass-enter-active` when `didInsertElement` is applied. The same happens in `willDestroyElement` using `yourclass-leave` and `yourclass-leave-active`.
-
-### Animating class add/removal
-
-Apart from the insert/destroy hooks for transitions, there is also an optional `transitionClassNameBindings` array
-that has the same syntax as `classNameBindings`, but also adds `*-add`, `*-add-active`, `*-remove` and `*-remove-active` to the
-classes that you specify based on their transition time.
-
-```js
-transitionClassNameBindings: ['isOpen', 'pinned:is-pinned']
+```hbs
+<div {{css-transition "example"}}>
+  <h1>Hello world</h1>
+</div>
 ```
 
-The above example will add the other classes for the two base classes, i.e. `.is-open` and `.is-pinned`.
-
-For more examples and docs, see: [http://peec.github.io/ember-css-transitions/](http://peec.github.io/ember-css-transitions/)
+Check out the homepage for more detailed documentation: [http://peec.github.io/ember-css-transitions/](http://peec.github.io/ember-css-transitions/)
 
 ## Install
 
@@ -76,7 +54,7 @@ ember install ember-css-transitions
 
 ```
 
-**Note** Installing ember-cli-autoprefixer is suggested for CSS transitions:
+**Note** Using ember-cli-autoprefixer is suggested for CSS transitions:
 
 ```
 ember install ember-cli-autoprefixer

diff --git a/package.json b/package.json
@@ -48,7 +48,6 @@
     "ember-cli-template-lint": "^1.0.0-beta.3",
     "ember-cli-uglify": "^3.0.0",
     "ember-cli-version-checker": "^3.1.3",
-    "ember-compatibility-helpers": "^1.2.0",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.1",

diff --git a/tests/integration/components/css-transition-test.js b/tests/integration/components/css-transition-test.js
@@ -1,9 +1,8 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, find, waitFor, waitUntil } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import { hbs } from 'ember-cli-htmlbars';
 import { spy } from 'sinon';
-import { gte } from 'ember-compatibility-helpers';
 
 module('Integration | Component | transition group', function(hooks) {
   setupRenderingTest(hooks);
@@ -17,30 +16,26 @@ module('Integration | Component | transition group', function(hooks) {
         </div>
       {{/if}}
     `
+  }, {
+    name: 'classic component',
+    template: hbs`
+      {{#if this.show}}
+        <MyComponent id="my-element" {{css-transition "example" didTransitionIn=this.didTransitionIn didTransitionOut=this.didTransitionOut}}>
+          <p class="content">Çup?</p>
+        </MyComponent>
+      {{/if}}
+    `
+  }, {
+    name: 'glimmer component',
+    template: hbs`
+      {{#if this.show}}
+        <GlimmerComponent id="my-element" {{css-transition "example" didTransitionIn=this.didTransitionIn didTransitionOut=this.didTransitionOut}}>
+          <p class="content">Çup?</p>
+        </GlimmerComponent>
+      {{/if}}
+    `
   }];
 
-  if (gte('3.9.0')) {
-    testCases.push({
-      name: 'classic component',
-      template: hbs`
-        {{#if this.show}}
-          <MyComponent id="my-element" {{css-transition "example" didTransitionIn=this.didTransitionIn didTransitionOut=this.didTransitionOut}}>
-            <p class="content">Çup?</p>
-          </MyComponent>
-        {{/if}}
-      `
-    }, {
-      name: 'glimmer component',
-      template: hbs`
-        {{#if this.show}}
-          <GlimmerComponent id="my-element" {{css-transition "example" didTransitionIn=this.didTransitionIn didTransitionOut=this.didTransitionOut}}>
-            <p class="content">Çup?</p>
-          </GlimmerComponent>
-        {{/if}}
-      `
-    });
-  }
-
   testCases.forEach((i) => {
 
     test(`enter and leave transitions work (${i.name})`, async function(assert) {
@@ -106,26 +101,22 @@ module('Integration | Component | transition group', function(hooks) {
         <p class="content">Çup?</p>
       </div>
     `
+  }, {
+    name: 'classic component',
+    template: hbs`
+      <MyComponent id="my-element" {{css-transition isImportant=this.isImportant didTransitionIn=this.didTransitionIn didTransitionOut=this.didTransitionOut}}>
+        <p class="content">Çup?</p>
+      </MyComponent>
+    `
+  }, {
+    name: 'glimmer component',
+    template: hbs`
+      <GlimmerComponent id="my-element" {{css-transition isImportant=this.isImportant didTransitionIn=this.didTransitionIn didTransitionOut=this.didTransitionOut}}>
+        <p class="content">Çup?</p>
+      </GlimmerComponent>
+    `
   }];
 
-  if (gte('3.9.0')) {
-    testCases.push({
-      name: 'classic component',
-      template: hbs`
-        <MyComponent id="my-element" {{css-transition isImportant=this.isImportant didTransitionIn=this.didTransitionIn didTransitionOut=this.didTransitionOut}}>
-          <p class="content">Çup?</p>
-        </MyComponent>
-      `
-    }, {
-      name: 'glimmer component',
-      template: hbs`
-        <GlimmerComponent id="my-element" {{css-transition isImportant=this.isImportant didTransitionIn=this.didTransitionIn didTransitionOut=this.didTransitionOut}}>
-          <p class="content">Çup?</p>
-        </GlimmerComponent>
-      `
-    });
-  }
-
   testCases.forEach((i) => {
 
     test(`add and remove transitions work (${i.name})`, async function(assert) {