山东大学项目实训——个人纪录（8）

目录

项目团队

日期

本周进度

---

项目团队

DrugLLM开发团队

日期

2024/5/26

本周进度

在学习了Animate.css库和transition元素相关知识后，将两者结合实现动画效果

通过访问Animate官网我们可以知道库中的不同动画的效果和名字，在项目中直接调用对应动作的名字即可。

我们选取图片实验一下

以下是实验代码

 <transition name="fade" enter-active-class="animated animate__fadeInLeft" >
          <div  style="width:300px;height: 300px ;" v-if="show">
            <img style="max-width: 100%; height: auto"  class="vite" ref="vite" src="@/assets/left.png">
          </div>
        </transition>

        <transition name="fade" enter-active-class="animated animate__rotateIn" >
          <div  style="width:300px;height: 300px ;" v-if="show">
            <img style="max-width: 100%; height: auto"  class="vite" ref="vite" src="@/assets/main.png">
          </div>
        </transition>
        <transition name="fade" enter-active-class="animated animate__fadeInRight" >
          <div  style="width:300px;height: 300px ;" v-if="show">
            <img style="max-width: 100%; height: auto"  class="vite" ref="vite" src="@/assets/right.png">
          </div>
        </transition>

运行结果：