Animation for Newly Rendered Elements, But Not on Page Load

Animation for newly rendered elements, but not on page load

Since Angular 4.25 there's an easier way to do this: If you want to suppress an :enter animation on view initialization, just wrap it with the following animation:

template: `
  <div [@preventInitialChildAnimations]>
    <div [@someAnimation]>...</div>
  </div>
`,
animations: [
  trigger('preventInitialChildAnimations', [
    transition(':enter', [
      query(':enter', [], {optional: true})
    ])
  ]),
  ...
]

How to prevent a CSS keyframe animation from running on page load?

Solution 1 - Add down animation on first hover

Probably the best option is to not put the down animation on until the user has hovered over the container for the first time.

This involves listening to the mouseover event then adding a class with the animation at that point, and removing the event listener. The main (potential) downside of this is it relies on Javascript.

;(function(){    var c = document.getElementById('container');    function addAnim() {        c.classList.add('animated')        // remove the listener, no longer needed        c.removeEventListener('mouseover', addAnim);    };
    // listen to mouseover for the container    c.addEventListener('mouseover', addAnim);})();

#container {    position:relative;    width:100px;    height:100px;    border-style:inset;}#content {    position:absolute;    top:100px;    width:100%;    height:100%;    background-color:lightgreen;    opacity:0;}
/* This gets added on first mouseover */#container.animated #content {    -webkit-animation:animDown 1s ease;}
#container:hover #content {    -webkit-animation:animUp 1s ease;    animation-fill-mode:forwards;    -webkit-animation-fill-mode:forwards;}
@-webkit-keyframes animUp {    0% {        -webkit-transform:translateY(0);        opacity:0;    }    100% {        -webkit-transform:translateY(-100%);        opacity:1;    }}@-webkit-keyframes animDown {    0% {        -webkit-transform:translateY(-100%);        opacity:1;    }    100% {        -webkit-transform:translateY(0);        opacity:0;    }}

<div id="container">    <div id="content"></div></div>

css3 transition animation on load?

You can run a CSS animation on page load without using any JavaScript; you just have to use CSS3 Keyframes.

Let's Look at an Example...

Here's a demonstration of a navigation menu sliding into place using CSS3 only:

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

header {  
  /* This section calls the slideInFromLeft animation we defined above */
  animation: 1s ease-out 0s 1 slideInFromLeft;
  
  background: #333;
  padding: 30px;
}

/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}

<header>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Products</a>
  <a href="#">Contact</a>
</header>

Angular. Is there a way to skip enter animation on initial render?

Just add an empty :enter animation to the view parent. In this case the initial child :enter animation will be disabled, but further animations will work.

Template:

<div @parent>
    <div @child>test</div>
</dif>

Animation:

trigger('parent', [
    transition(':enter', [])
])
trigger('child', [
    transition(':enter', [
      style({width: 0}),
      animate(250, style({width: '*'})),
    ]),
])

Here you can find more detailed explanation.

Prevent CSS3 animation from firing after page load

You could simplify what you have a bit.

Working Example

$('#btnLogin').click(function() {  $('.panel').toggleClass('active');});

.panel {  background-color: red;  height: 200px;  opacity: 0;  width: 200px;  transition: 2s;}.panel.active {  opacity: 1;  transition: 2s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="body">  <div class="panel"></div></div><button id="btnLogin">Login</button>

Angular: Disable animation on page load

You can use disable animation using @.disabled binding. place this special binding on that element you want to disable animation. Then define isDisabled property inside your component then set isDisabled to true when you add form control

component.html

 <div [@.disabled]="isDisabled"
  *ngFor="let option of options.controls; let i = index"
  class="form-options" >
  <input
    type="text"
    placeholder="Add option {{ i + 1 }}"
    [formControlName]="i"
    (focus)="onOptionFocus(i)"
    [@input]="'in'"
  />
</div>

component.ts

export class SomeClass{
 isDisabled = true;

 addControl(){
  this.isDisabled = false;
  ....
 }
}

My animation is not working when re rendering my react component?

You could make use of keys that react is using to determine whether something has changed. This means that your render method should look something like this:

import shortid from "shortid";

getRandomKey = () => {
    return shortid.generate();
}

render() {
    return (
      <div
        key={this.getRandomKey()}
        className={cs({
          "tls-forms": true,
          "tls-forms--large": this.props.type === "S",
          "tls-forms--medium tls-forms--login": !(this.props.type === "S")
        })}
      >
      // content here 
      </div>);
 }

Since you need to run animation on each render, you'll need to generate some random key every time (that's why we are calling this.getRandomKey() on each render). You can use whatever you like for your getRandomKey implementation, though shortid is pretty good for generating unique keys.

Start an animation after page loads on react

First, use "useState" to decide whether to apply animation. ( changing the state of the page )

Second, use "useEffect" to make the desired action run after the page loads. If you pass an empty array as the second parameter, the callback is executed only once after the page is loaded.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
  <style>
    body {background-color: powderblue; display:grid; place-items: center;}
    @keyframes swing {
      0% { transform: rotate(30deg); }
      100% { transform: rotate(-30deg); }
    }
    .dangle {
      animation: swing ease-out 5s forwards;
      float: left;
      background-color: red;
    }
  </style>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {animate: false};
        }
        componentDidMount(){
          this.setState({animate: true})
        }
        
        render() {
          return <div className={this.state.animate ? "dangle" : ""}>Hello</div>;
        }
      }

      ReactDOM.render(
        <App />,
        document.getElementById('root')
      );

    </script>
  </body>
</html>

---

Related Topics