Vue中同时使用过渡和动画
初始渲染的过渡
在上一篇animate.css代码的基础上，运行时可以发现当页面第一次渲染元素时，并没有出场动画。我们可以通过 appear attribute 设置节点在初始渲染的过渡,同样也需要自定义类名：
<div id="root"> <transition name="fade" appear enter-active-class="animated swing" leave-active-class="animated shake" appear-active-class="animated swing" > <div v-show = "show">Hello Worlddiv> transition> <button @click="handleClick">togglebutton> div>
添加了appear和appear-active-class两个属性后，第一次元素的显示也具备了动画效果
同时使用过渡和动画
在页面搭建时，我们往往需要将两种动画效果相结合，过渡是通过transition来实现，而animate是通过 @keyframes 来实现。
在上述代码的基础上，给自定义的class名添加在过渡动画时使用的class名：fade-enter-active和fade-leave-active
<div id="root"> <transition name="fade" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing" > <div v-show = "show">Hello Worlddiv> transition> <button @click="handleClick">togglebutton> div>
根据过渡动画的内容添加CSS样式:
动画的持续时间问题
在一些场景中，需要给同一个元素同时设置过渡动效，vue也搞不清以哪个类型的动画时长作为整体时长 ，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。
①在这种情况中，可以使用 type attribute 并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。
在上述例子中，过渡动画持续了3s，animate持续为1s，我们以长的时间为例，在transition标签内添加type属性:
<transition type="transition" name="fade" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing"> <div v-show = "show">Hello Worlddiv> transition>
这样动画的持续效果即由过渡动画决定，即为3s.
②也可以自定义动画的时长(以毫秒计)，在transition标签内添加:duration
<transition :duration="10000" name="fade" appear enter-active-class="animated swing fade-enter-active" leave-active-class="animated shake fade-leave-active" appear-active-class="animated swing" > <div v-show = "show">Hello Worlddiv> transition>
注意：duration里的数字所代表的时间单位为毫秒(ms)
也可以定制进入和移出的持续时间：
<transition :duration="{ enter: 500, leave: 800 }">...transition>
例子完整代码展示
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue中同时使用过渡和动画title>
<script src="../vue.js">script>
<link rel="stylesheet" type="text/css" href="../animate.css">
<style>
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
}
style>
head>
<body>
<div id="root">
<transition
:duration="{enter:5000,leave:10000}"
name="fade"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-ative-class="animated swing">
<div v-show="show">Hello Worlddiv>
transition>
<button @click="handleClick">togglebutton>
div>
<script>
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
})
script>
body>
html>