Skip to content

[vue] vue过渡动画实现的方式有哪些? #349

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] vue过渡动画实现的方式有哪些?

Activity

xunbie

xunbie commented on Jul 19, 2019

@xunbie

1.使用vue的transition标签结合css样式完成动画
2.利用animate.css结合transition实现动画
3.利用 vue中的钩子函数实现动画

Cai-zhiji

Cai-zhiji commented on Jul 7, 2023

@Cai-zhiji

使用内置的过渡类名和CSS过渡:

Vue提供了一些内置的过渡类名,例如v-enter、v-enter-active、v-leave和v-leave-active等,可以通过自定义CSS样式来实现过渡效果。通过为元素添加这些类名,结合CSS过渡属性(如transition、animation等),可以实现元素的渐入渐出效果。

使用组件:

Vue提供了组件,它可以包裹需要过渡的元素,并通过设置不同的过渡名称来控制过渡效果。可以使用CSS过渡或动画属性,或者使用Vue提供的JavaScript钩子函数来自定义过渡效果。

<transition name="fade">
  <div v-if="show">Hello, World!</div>
</transition>

使用组件:

与组件类似,组件也可以用于实现过渡效果,但它适用于多个元素之间的过渡。通过设置过渡名称和提供key属性,可以在元素列表中添加或删除元素时触发过渡效果。

  <div v-for="item in items" :key="item.id">{{ item.text }}</div>
</transition-group>

使用第三方动画库:

除了Vue的内置过渡功能,还可以使用一些第三方的动画库,如Animate.css、Velocity.js等。这些库提供了更丰富的过渡效果和动画选项,可以与Vue结合使用来实现更复杂的过渡效果。

需要注意的是,在使用过渡动画时,可以结合Vue提供的过渡钩子函数(如before-enter、after-enter等)来控制过渡的不同阶段。通过在这些钩子函数中添加适当的样式或操作,可以实现更精细的过渡控制。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@censek@xunbie@Cai-zhiji

        Issue actions

          [vue] vue过渡动画实现的方式有哪些? · Issue #349 · haizlin/fe-interview