### Install Dependencies Source: https://github.com/ember-animation/ember-animated/blob/master/CONTRIBUTING.md Clones the repository and installs project dependencies using pnpm. This is the initial setup step for contributing to the project. ```bash git clone https://github.com/ember-animation/ember-animated.git cd ember-animated pnpm install ``` -------------------------------- ### Install Ember Animated Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/index.md Command to install the Ember Animated addon using the Ember CLI. ```sh ember install ember-animated ``` -------------------------------- ### Start Development Server Source: https://github.com/ember-animation/ember-animated/blob/master/docs/README.md Starts the Ember development server, allowing you to view and interact with the application locally. The app is typically accessible at http://localhost:4200. ```Bash pnpm start ``` -------------------------------- ### Install Dependencies with pnpm Source: https://github.com/ember-animation/ember-animated/blob/master/docs/README.md Installs all project dependencies using the pnpm package manager. This command is essential after cloning the repository. ```Bash pnpm install ``` -------------------------------- ### Ember Animation: Between Components Example Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/beacons.md An example demonstrating animation between components using Ember Animation. It likely involves setting up transitions and managing component rendering. ```html ``` -------------------------------- ### Install Dependencies Source: https://github.com/ember-animation/ember-animated/blob/master/RELEASE.md Installs the project's dependencies using pnpm. This is a prerequisite before initiating the release process. ```sh pnpm install ``` -------------------------------- ### Run Documentation Application Source: https://github.com/ember-animation/ember-animated/blob/master/CONTRIBUTING.md Starts the local development server for the documentation site, accessible at http://localhost:4200. Requires the addon to be built in watch mode. ```bash cd addon && pnpm run start cd docs && ember serve ``` -------------------------------- ### Run Test Application Source: https://github.com/ember-animation/ember-animated/blob/master/CONTRIBUTING.md Starts the local development server for the test application, accessible at http://localhost:4200. ```bash cd test-app && ember serve ``` -------------------------------- ### Run Ember Tests in Server Mode Source: https://github.com/ember-animation/ember-animated/blob/master/docs/README.md Starts a development server specifically for running Ember tests, allowing for interactive debugging. ```Bash pnpm test:ember --server ``` -------------------------------- ### CSS for Two Lists Animation Example Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/between.md This CSS snippet provides styling for the 'two lists' animation example. It likely includes styles for the lists themselves, individual items, and potentially visual cues for the animation. ```CSS .tg {border-collapse:collapse;border-spacing:0;} .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;} .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;} .tg .tg-eh2d{background-color:#ffffff;border-color:inherit;vertical-align:top} .tg .tg-47u2{font-weight:bold;background-color:#ffffff;border-color:inherit;vertical-align:top;text-align:left} .tg .tg-7g6k{font-weight:bold;background-color:#ffffff;border-color:inherit;text-align:center;vertical-align:top} ``` -------------------------------- ### CSS for Hero Animation Example Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/between.md This CSS snippet provides styling for the 'hero' animation example, likely affecting the layout and appearance of elements during route transitions. ```CSS .hero-example { /* Add styles for the hero container */ } ``` -------------------------------- ### Hero Example Snippet (Handlebars) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/between.md This Handlebars snippet is part of the 'hero' example, likely defining the structure or content of the hero section during route transitions. ```Handlebars {{!-- hero-snippet.hbs --}} ``` -------------------------------- ### Ember Animation: Inbox Sprites Example (HBS) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/sprites.md This Handlebars snippet defines the structure for an email inbox example using Ember Animation. It includes components for logging transitions and displaying logged sprites within a documentation demo context. ```HTML ``` -------------------------------- ### Initiate Release Source: https://github.com/ember-animation/ember-animated/blob/master/RELEASE.md Starts the release process using the 'pnpm release' command. This command triggers automated tools to handle versioning, changelog updates, tagging, and pushing to the repository. ```sh pnpm release ``` -------------------------------- ### Example Snippet for Animating Between Two Lists (Handlebars) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/between.md This Handlebars snippet is part of an example demonstrating sprite animations between two lists. It likely contains the template structure for displaying the lists and triggering animations. ```Handlebars {{!-- between-two-lists-example-snippet.hbs --}} ``` -------------------------------- ### Ember Animation: Inbox Sprites Example (CSS) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/sprites.md This CSS snippet provides styling for the email inbox animation example within an Ember Animation context. The specific styles are not detailed in the provided text, but it's essential for the visual presentation of the animation. ```CSS /* Specific CSS rules for the inbox animation example are not provided in the input text. */ ``` -------------------------------- ### Example Snippet for Animating Between Two Lists (JavaScript) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/between.md This JavaScript snippet is part of an example for animating sprites between two lists. It likely contains the component logic, event handlers, or data management required for the animation. ```JavaScript {{!-- between-two-lists-example-snippet.js --}} ``` -------------------------------- ### Ember Animation: Between Components Snippet (JS) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/beacons.md The JavaScript snippet for the 'between-components' example in Ember Animation. This file likely contains the component logic, transition definitions, and any necessary JavaScript for the animation. ```javascript ``` -------------------------------- ### Ember Animation: Inbox Sprites Example (JS) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/sprites.md This JavaScript snippet is likely part of an Ember.js application demonstrating Ember Animation. It's associated with an example named 'inbox' and references specific snippet files for Handlebars and CSS. ```JavaScript // Likely contains Ember component or route logic for the inbox example. // Specific code not provided in the input text, only the reference to the file. ``` -------------------------------- ### Ember Animation: Between Components Snippet (HBS) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/beacons.md The Handlebars template snippet for the 'between-components' example in Ember Animation. This file likely contains the HTML structure and Ember specific syntax for the animation. ```html ``` -------------------------------- ### Animate Sprites Across Routes (Handlebars - Hero Example) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/between.md This Handlebars snippet is for the 'hero' example, likely representing the main container or view for route transition animations. It uses an `AnimatedContainer` component. ```Handlebars {{hero-example}} ``` -------------------------------- ### Custom Slide Transition Example (Handlebars) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/transitions.md This Handlebars snippet demonstrates a custom transition, likely 'slideFromSide', for animating elements entering, leaving, or staying on screen. ```Handlebars ``` -------------------------------- ### Fade Transition Example (Handlebars) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/transitions.md This Handlebars snippet demonstrates the usage of a fade transition. It likely controls the visibility or opacity of elements as they are inserted or removed. ```Handlebars ``` -------------------------------- ### Move Over Transition Example (Handlebars) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/transitions.md This Handlebars snippet showcases the 'moveOver' transition, likely used for animating elements moving horizontally across the screen. ```Handlebars ``` -------------------------------- ### Ember Animation: Sprites Snippet (CSS) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/beacons.md The CSS snippet used in the Ember Animation 'sprites' example. This file likely contains styles related to the animated sprites, including positioning, transitions, and visual effects. ```css ``` -------------------------------- ### Ember Animated: Handlebars Rules Example Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/rules.md This Handlebars snippet demonstrates the usage of Ember Animated's `rules` for data-dependent transitions. It likely includes the `animated-value` helper and potentially the `{{#animated-each}}` block to apply conditional animations based on data changes. ```Handlebars
{{#animated-value count transition="fade-in" "fade-out"}} {{count}} {{/animated-value}}
``` -------------------------------- ### Ember Animated: JavaScript Rules Logic Example Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/rules.md This JavaScript snippet likely contains the Ember component logic for managing data-dependent animations. It would define the `rules` that determine which transition to apply based on the comparison of old and new data values, such as a counter. ```JavaScript import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; export default class RulesExampleComponent extends Component { @tracked count = 0; get rules() { return [ { name: 'increment', // Compare new value to old value // If new > old, use 'toUp' transition test: ({ oldList, newList }) => newList.length > oldList.length, transition: 'toUp' }, { name: 'decrement', // If old > new, use 'toDown' transition test: ({ oldList, newList }) => oldList.length > newList.length, transition: 'toDown' } ]; } @action increment() { this.count++; } @action decrement() { this.count--; } } ``` -------------------------------- ### Ember Animated: CSS for Animated Elements Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/rules.md This CSS snippet provides styling for the animated elements within the Ember Animated example. It likely includes styles for the container and potentially transitions or animations applied via CSS classes. ```CSS .animated-container { display: inline-block; /* Or block, depending on layout needs */ min-width: 50px; /* Ensure space for numbers */ text-align: center; padding: 10px; border: 1px solid #ccc; margin-bottom: 10px; } /* Example transitions (often handled by JS, but CSS can supplement) */ .fade-in-enter { opacity: 0; } .fade-in-enter-active { transition: opacity 0.5s; } .fade-in-leave-active { transition: opacity 0.5s; } .to-up-enter { transform: translateY(20px); opacity: 0; } .to-up-enter-active { transition: all 0.5s ease-in-out; } .to-up-leave-active { transition: all 0.5s ease-in-out; } .to-down-enter { transform: translateY(-20px); opacity: 0; } .to-down-enter-active { transition: all 0.5s ease-in-out; } .to-down-leave-active { transition: all 0.5s ease-in-out; } ``` -------------------------------- ### Move Sprite with CSS Transforms Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/motions.md Animates a sprite's position using CSS transforms. Requires starting and ending positions and accepts an 'easing' option. This motion is compatible with 'keptSprites'. ```Handlebars ``` ```JavaScript ``` ```CSS ``` -------------------------------- ### Clone ember-animated Repository Source: https://github.com/ember-animation/ember-animated/blob/master/docs/README.md Clones the ember-animated repository from GitHub. This is the first step in setting up the project locally. ```Bash git clone https://github.com/ember-animation/ember-animated.git ``` -------------------------------- ### Run Tests Source: https://github.com/ember-animation/ember-animated/blob/master/CONTRIBUTING.md Commands for running the test suite. Includes options for watch mode and testing against multiple Ember versions using `ember-try`. ```bash cd addon && pnpm start cd test-app && ember test cd test-app && ember test --server cd test-app && ember try:each ``` -------------------------------- ### Build Addon Source: https://github.com/ember-animation/ember-animated/blob/master/CONTRIBUTING.md Builds the ember-animated addon. This command is typically run within the `addon` directory. ```bash cd addon pnpm build ``` -------------------------------- ### Build for Production Source: https://github.com/ember-animation/ember-animated/blob/master/docs/README.md Compiles the Ember application for production deployment, including optimizations for performance and size. ```Bash pnpm build --environment production ``` -------------------------------- ### Build for Development Source: https://github.com/ember-animation/ember-animated/blob/master/docs/README.md Compiles the Ember application for development, optimizing for fast rebuilds. ```Bash pnpm build ``` -------------------------------- ### Run All Tests Source: https://github.com/ember-animation/ember-animated/blob/master/docs/README.md Executes all unit and integration tests for the Ember application using the pnpm test command. ```Bash pnpm test ``` -------------------------------- ### Run Ember CLI Generators Source: https://github.com/ember-animation/ember-animated/blob/master/docs/README.md Provides information on using Ember CLI's code generators to create new components, routes, and other application elements. Use `ember help generate` for more details. ```Ember CLI ember help generate ``` -------------------------------- ### Navigate to ember-animated Docs Directory Source: https://github.com/ember-animation/ember-animated/blob/master/docs/README.md Changes the current directory to the 'docs' folder within the cloned ember-animated repository. ```Bash cd ember-animated/docs ``` -------------------------------- ### Lint Codebase Source: https://github.com/ember-animation/ember-animated/blob/master/docs/README.md Runs the linter to check for code style and potential errors across the project. ```Bash pnpm lint ``` -------------------------------- ### Ember Animated Top-Level Imports Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/index.md Alternative import method for Ember Animated components and helpers from the top-level module, suitable for build environments with tree-shaking optimizations. ```gjs import { AnimatedBeacon, AnimatedContainer, animatedEach, animatedIf, AnimatedOrphans, animatedValue, } from 'ember-animated'; ``` -------------------------------- ### Lint Code Source: https://github.com/ember-animation/ember-animated/blob/master/CONTRIBUTING.md Runs code linting to check for style and potential errors. The `lint:fix` command attempts to automatically correct linting issues. ```bash pnpm lint pnpm lint:fix ``` -------------------------------- ### Ember Animation: LoggedBetweenComponents Transition Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/beacons.md Logs transitions between components using Ember Animation's LoggedBetweenComponents helper. This is useful for debugging and understanding animation flow. ```html ``` -------------------------------- ### Set GitHub Authentication Token Source: https://github.com/ember-animation/ember-animated/blob/master/RELEASE.md Sets the GITHUB_AUTH environment variable with a GitHub personal access token. This token requires the 'repo' scope and is used by release tools for authentication with GitHub. ```bash export GITHUB_AUTH=abc123def456 ``` -------------------------------- ### Ember Animated Glint Integration Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/index.md Configuration for integrating Ember Animated with Glint for type checking in .hbs files. This involves adding specific declarations to the `types/global.d.ts` file. ```typescript import '@glint/environment-ember-loose'; import type EmberAnimatedRegistry from 'ember-animated/template-registry'; declare module '@glint/environment-ember-loose/registry' { export default interface Registry extends EmberAnimatedRegistry, /* other addon registries */ { // local entries } } ``` -------------------------------- ### Ember Animated Usage in Glimmer Components (gts/gjs) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/index.md Demonstrates how to import and use Ember Animated components and helpers within Glimmer.js templates. It shows the usage of AnimatedBeacon, AnimatedContainer, animatedEach, animatedIf, AnimatedOrphans, and animatedValue with different configurations. ```gjs import AnimatedBeacon from 'ember-animated/components/animated-beacon'; import AnimatedContainer from 'ember-animated/components/animated-container'; import animatedEach from 'ember-animated/components/animated-each'; import animatedIf from 'ember-animated/components/animated-id'; import AnimatedOrphans from 'ember-animated/components/animated-orphans'; import animatedValue from 'ember-animated/components/animated-value'; ``` -------------------------------- ### Fix Linting Errors Source: https://github.com/ember-animation/ember-animated/blob/master/docs/README.md Automatically attempts to fix linting issues found in the codebase. ```Bash pnpm lint:fix ``` -------------------------------- ### Move Over Transition Implementation (JavaScript) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/transitions.md This JavaScript snippet implements the 'moveOver' transition, potentially handling animations for elements moving left or right, possibly using rules to determine direction. ```JavaScript // JavaScript for moveOver transition // This would handle the logic for moving elements based on rules. ``` -------------------------------- ### Fade Transition Implementation (JavaScript) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/transitions.md This JavaScript snippet likely contains the logic for the fade transition, managing the animation of elements fading in or out based on state changes. ```JavaScript // JavaScript for fade transition // This would typically involve animation functions to control opacity. ``` -------------------------------- ### Detail Page Snippet (Handlebars) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/between.md This Handlebars snippet is for the 'detail' route, likely displaying specific item information and participating in route transition animations. ```Handlebars {{!-- detail-snippet.hbs --}} ``` -------------------------------- ### Index Route Snippet (JavaScript) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/between.md This JavaScript snippet is associated with the 'index' route and handles the logic for animating sprites during route transitions. It might manage the initial list display or prepare data for the detail view. ```JavaScript {{!-- index-snippet.js --}} ``` -------------------------------- ### Custom Slide Transition Implementation (JavaScript) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/transitions.md This JavaScript snippet defines a custom 'slideFromSide' transition, applying motions to inserted, kept, and removed sprites for side-to-side animation. ```JavaScript // JavaScript for custom slideFromSide transition // This would define animations for inserted, kept, and removed sprites. ``` -------------------------------- ### Animate Sprite Height and Width Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/motions.md Animates the height and width of a sprite, accepting length values or percentages. It expects the initial and final states of the sprite. 'scale' is recommended as it uses CSS transforms and avoids reflow. -------------------------------- ### Index Route Snippet (Handlebars) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/between.md This Handlebars snippet is for the 'index' route, likely displaying a list of items that will animate when transitioning to or from the detail route. ```Handlebars {{!-- index-snippet.hbs --}} ``` -------------------------------- ### Detail Route Animation Snippet (JavaScript) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/between.md This JavaScript snippet is associated with the 'detail' route and handles the logic for animating sprites during route transitions. It might manage sprite state or animation parameters. ```JavaScript {{!-- between-detail-snippet.js --}} ``` -------------------------------- ### Animate Sprites Between Two Lists (Handlebars) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/between.md This Handlebars snippet demonstrates how to set up a component for animating sprites between two lists. It likely involves passing data and configurations to child components that handle the actual animation logic. ```Handlebars ``` -------------------------------- ### Sprite Categories Table Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/sprites.md A table summarizing the three main sprite categories (insertedSprites, keptSprites, removedSprites) and the type of bounds data (Initial Bounds, Final Bounds) they store. This helps in understanding their behavior during DOM transitions. ```html
Name Initial Bounds Final Bounds
insertedSprites ❌ ✅
keptSprites ✅ ✅
removedSprites ✅ ❌
``` -------------------------------- ### Fade Transition Styling (CSS) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/transitions.md This CSS snippet provides the styling for the fade transition, likely controlling opacity and potentially transition properties for smooth fading effects. ```CSS /* CSS for fade transition */ /* Example: */ .fade-in { opacity: 1; transition: opacity 0.3s ease-in-out; } .fade-out { opacity: 0; transition: opacity 0.3s ease-in-out; } ``` -------------------------------- ### Custom Slide Transition Styling (CSS) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/transitions.md This CSS snippet provides the styling for the custom 'slideFromSide' transition, controlling the visual appearance and animation of elements sliding from the side. ```CSS /* CSS for custom slideFromSide transition */ /* Example: */ .slide-in-from-side { transform: translateX(0); transition: transform 0.4s ease-out; } .slide-out-to-side { transform: translateX(100%); transition: transform 0.4s ease-out; } ``` -------------------------------- ### Move Over Transition Styling (CSS) Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/transitions.md This CSS snippet provides the styling for the 'moveOver' transition, likely controlling positioning and transition properties for horizontal movement. ```CSS /* CSS for moveOver transition */ /* Example: */ .move-left { transform: translateX(-100%); transition: transform 0.3s ease-in-out; } .move-right { transform: translateX(100%); transition: transform 0.3s ease-in-out; } ``` -------------------------------- ### Animate Sprite Opacity Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/motions.md Animates a sprite's opacity from 0% to 100% or vice versa. Accepts 'from' and 'to' arguments. 'fadeIn' and 'fadeOut' are exported from the same module for specific fade animations. ```Handlebars ``` ```JavaScript ``` -------------------------------- ### Animate Sprite Size with CSS Transforms Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/motions.md Applies CSS transforms to animate the initial size of a sprite to its final size. This is an alternative to 'resize' that can improve performance by avoiding reflows. -------------------------------- ### Animate Sprite CSS Property Change Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/motions.md Animates changes in a sprite's CSS properties that involve a unit and a number, such as 'font-size' or 'letter-spacing'. ```Handlebars ``` ```Handlebars ``` ```JavaScript ``` ```CSS ``` -------------------------------- ### Animate SVG Element Property Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/motions.md Animates a specific property of an SVG element, such as the 'cx' attribute of a circle. It takes the attribute name and animates it from an initial to a final value. ```Handlebars ``` ```JavaScript ``` -------------------------------- ### Adjust Sprite Color Source: https://github.com/ember-animation/ember-animated/blob/master/docs/app/templates/docs/motions.md Animates the change in a sprite's CSS color attribute. The 'from' argument takes a CSS color, otherwise it defaults to the sprite's measured initial color and animates to the default final color. === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.