从入门到项目实战 - vue 中使用动画技术

<template>
<button @click="show = !show"> {{show}}</button>
<transition>
  <h1 :class="{
    animate__animated:true, 
    animate__fadeIn:show,
    animate__fadeOut:!show,
  }"
  >一段淡入淡出的动画文字。
  </h1>
</transition>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup(){
    return {
      show: ref(true)
    }
  }
});
</script>
<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>

<template>
<button @click="show = !show"> {{show}}</button>
<transition name="fade">
  <h1 :class="{
    animate__animated:true, 
    animate__fadeIn:show,
    animate__fadeOut:!show,
  }"
  >一段淡入淡出的动画文字。
  </h1>
</transition>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup(){
    return {
      show: ref(true)
    }
  }
});
</script>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

<template>
  <transition
    name="custom-classes"
    enter-active-class="animate__animated animate__tada"
    leave-active-class="animate__animated animate__bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import 'animate.css';
export default defineComponent({});
</script>

<Transition type="animation">...</Transition>

<Transition name="nested">
  <div v-if="show" class="outer">
    <div class="inner">
      Hello
    </div>
  </div>
</Transition>

/* rules that target nested elements */
.nested-enter-active .inner,
.nested-leave-active .inner {
  transition: all 0.3s ease-in-out;
}
.nested-enter-from .inner,
.nested-leave-to .inner {
  transform: translateX(30px);
  opacity: 0;
}

/* delay enter of nested element for staggered effect */
.nested-enter-active .inner {
  transition-delay: 0.25s;
}

<Transition :duration="550">...</Transition>

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
<!-- ... -->
</Transition>

export default {
  // ...
  methods: {
    // 在元素插入到DOM之前调用。
    // 用它来设置元素的“enter-from”状态
    onBeforeEnter(el) {},
    // 插入元素后一帧调用。
    // 用它来开始动画。
    onEnter(el, done) {
      // 调用done回调来指示transition结束
      // 如果与CSS结合使用，则可选
      done()
    },
    // 当进入 transition 完成时调用。
    onAfterEnter(el) {},
    onEnterCancelled(el) {},
    // 在离开钩子前调用
    // 大多数情况下，你应该使用离开钩子。
    onBeforeLeave(el) {},
    // 离开 transition 开始时调用。
    // 使用这个开始离开动画。
    onLeave(el, done) {
      // 调用done回调来指示 transition 结束
      // 如果与CSS结合使用，则可选
      done()
    },
    // 当离开 transition 完成并且元素已经从DOM中移除时调用。
    onAfterLeave(el) {},
    // 当且仅当使用 v-show transitions 时有效
    leaveCancelled(el) {}
  }
}

<TransitionGroup tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

<template>
<button @click="add()"> 添加 </button>
<button @click="pop()"> 删除 </button>
<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup(){
    return {
      items: ref([1,2,3,4,5,6])
    }
  },
  methods:{
    add(){
      this.items.push(
        Math.round(Math.random()*10)
      )
    },
    pop(){
      this.items.pop()
    }
  }
});
</script>
<style lang="scss" scoped>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>

.list-move, /* 应用 transition 来移动元素 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
/* 确保离开项目从布局流中移除，以便可以正确计算移动动画。 */
.list-leave-active {
  position: absolute;
}

<TransitionGroup
  tag="ul"
  :css="false"
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @leave="onLeave"
>
  <li
    v-for="(item, index) in computedList"
    :key="item.msg"
    :data-index="index"
  >
    {{ item.msg }}
  </li>
</TransitionGroup>

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

<Suspense>
  <template #default>
    <router-view v-slot="{ Component, route }">
      <transition :name="route.meta.transition || 'fade'" mode="out-in">
        <keep-alive>
          <component
            :is="Component"
            :key="route.meta.usePathKey ? route.path : undefined"
          />
        </keep-alive>
      </transition>
    </router-view>
  </template>
  <template #fallback> Loading... </template>
</Suspense>

app.use(router)
// 注意：在服务器端，你需要手动跳转到初始地址。
router.isReady().then(() => app.mount('#app'))

npm install animate.css --save

yarn add animate.css

<template>
  <h1 class="animate__animated animate__bounce ">一段跳动的动画文字。</h1>
</template>
<script lang="ts">
import 'animate.css';
import { defineComponent, } from 'vue';
export default defineComponent({})
</script>

<style lang="scss" scoped>
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}
</style>

<style lang="scss" scoped>
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}
</style>

<template>
  <h1 class="my-element">一段跳动的动画文字。</h1>
</template>
<script lang="ts">
import 'animate.css';
import { defineComponent, } from 'vue';
export default defineComponent({})
</script>
<style scropd>
.my-element {
  display: inline-block;
  margin: 0 0.5rem;
  animation: bounce;      /* 直接引用动画的 @keyframe 声明 */
  animation-duration: 2s; /* 别忘了设置时长！ */
}
</style>

document.documentElement.style.setProperty('--animate-duration', '2s');

document.documentElement.style.setProperty('--animate-duration', '.5s');

<template>
  <h1 class="animate__animated animate__bounce ">一段跳动的动画文字。</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import 'animate.css';
export default defineComponent({
  beforeMount(){
    // 所有动画将花费两倍的时间来完成
    document.documentElement.style.setProperty('--animate-duration', '.1s');
  }
});
</script>

<!-- 重复2次 -->
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

<template>
  <transition
    name="custom-classes"
    enter-active-class="animate__animated animate__tada"
    leave-active-class="animate__animated animate__bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import 'animate.css';
export default defineComponent({});
</script>

<router-view :class="{
  'jcadmin-childPage':true,
  'animate__animated': true,
  'animate__zoomInDown': true,
  'animate__zoomOutDown': false,
}" >
</router-view>