A brief summary of Vue entry/exit transitions & animations

This is the 9th day of my participation in Gwen Challenge

Hi, I’m Daotin, front end team leader. If you want to get more front end highlights, follow me and unlock new front end growth poses.

The following text:

CSS transition

Generally, only two Settings are required:

/* You can set different entry and exit animations */
/* Sets the duration and animation function */

// Go to animation
.fade-enter-active {
  transition: all .3s ease;
}

// Leave the animation
.fade-leave-active {
  transition: all .8s cubic-bezier(1.0.0.5.0.8.1.0);
}

// Initial state
.fade-enter..fade-leave-to  {
  transform: translateX(10px);
  opacity: 0;
}
Copy the code

CSS animations

// Animation on entry
.bounce-enter-active {
  animation: bounce .5s;
}
// Leave animation
.bounce-leave-active {
  animation: bounce .5s reverse;
}

// Set the animation name, initial style, and end style
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1); }}Copy the code

Custom transition class name

Use third-party CSS plug-ins: Animate. CSS

<transition 
    enter-active-class="animated zoomIn" 
    leave-active-class="animated zoomOut" 
    :duration="{ enter: 200, leave: 400 }">
</transition>
Copy the code

Transitions during initial rendering

You can use the Appear property to set the transition of the node in the initial rendering.

<transition
  appear
  appear-class="custom-appear-class"// Load the start styleappear-to-class="custom-appear-to-class"// End of load style (2.1.8+)
  appear-active-class="custom-appear-active-class"// Load process animation >
  <! -... -->
</transition>
Copy the code

Transition mode

• in-out: The new element transitions first, then the current element transitions away.
• out-in: The current element transitions first, and then the new element transitions in.

<transition name="fade" mode="out-in">
  <! -... -->
</transition>
Copy the code

List the transition

Use the
component.

Enter/leave transition

<transition-group name="list">
    <span v-for="item in items" v-bind:key="item" class="list-item">{{ item }}</span>
</transition-group>
Copy the code

Sort the transition

Just be aware of the new V-Move attribute, which is applied during element change positioning. As with the class name before, the prefix can be customized through the name attribute or manually set through the move-class attribute.

• The default mode

<transition>
    <! -... -->
</transition>

//css
.v-move {
    transition: all 1s;
}
Copy the code

• throughnameAttribute custom prefix

<transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">{{ item }}</li>
</transition-group>

// css
.flip-list-move {
  transition: transform 1s;
}
Copy the code

• move-classattribute

slightlyCopy the code

Refer to the link

• Cn.vuejs.org/v2/guide/tr…
• Github.com/Daotin/Web/…

---

Recent hot articles:

• Waterfall flow, it’s so easy
• Four common ajax cross-domain solutions (easy to understand)
• Vue. Js Naming Style Guide (Easy to remember Version)

Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin, Daotin