Using a name for the effect
Classes of type "v-enter-xxx"
or "v-leave-xxx"
can be renamed to symbolize the effect with which they are associated. We just need to replace the character string "v-"
with the name of the effect followed by "-"
.
For example, "v-enter-from"
will be replaced by "fade-enter-from"
to give the name "fade"
to the effect. We then add the name="fade"
attribute to the <transition>
component, indicating <transition name="fade">
.
This allows us to integrate several effects into our application, by defining the CSS classes corresponding to each effect.
The previous program, integrating the effect named "fade"
in the paragraph, is then written as follows:
Fade effect (index.html file)
<html> <head> <meta charset="utf-8" /> <script src="https://unpkg...