标签：city styles and 例子 meta aci 定义类 win 类型
在上一篇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 World</div> </transition> <button @click="handleClick">toggle</button> </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 World</div> </transition> <button @click="handleClick">toggle</button> </div>
根据过渡动画的内容添加CSS样式:
<style> .fade-enter, .fade-leave-to { opacity: 0; } .fade-enter-active, .fade-leave-active { transition: opacity 3s; } </style>
在一些场景中，需要给同一个元素同时设置过渡动效，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 World</div> </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 World</div> </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> <!-- animate.css 提供的动画是@keyframes类型的动画效果--> <!-- 在第一次元素显示的时候也具备动画效果 --> <!-- animate.css执行动画的时间是1s vue也搞不清以哪个类型的动画时长作为整体时长 我们可以手动设置 以（过渡动画的时长）3秒时长作为整个动画的执行时间 :duration="number" 单位是毫秒 自己定义动画的总时长 enter:time 入场动画 leave:time 出场动画--> <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 World</div> </transition> <button @click="handleClick">toggle</button> </div> <script> var vm = new Vue({ el: "#root", data: { show: true }, methods: { handleClick: function() { this.show = !this.show } } }) </script> </body> </html>
标签：city styles and 例子 meta aci 定义类 win 类型
原文地址：https://www.cnblogs.com/Small-Windmill/p/14386848.html
