{"id":710,"date":"2023-05-14T17:09:07","date_gmt":"2023-05-14T09:09:07","guid":{"rendered":"http:\/\/gjweb.top\/?p=710"},"modified":"2023-05-14T17:09:08","modified_gmt":"2023-05-14T09:09:08","slug":"09-%e5%8a%a8%e7%94%bb%e5%b1%9e%e6%80%a7","status":"publish","type":"post","link":"https:\/\/gjweb.top\/?p=710","title":{"rendered":"09. \u52a8\u753b\u5c5e\u6027"},"content":{"rendered":"\n

\u52a8\u753b\u5c5e\u6027 transition<\/h2>\n\n\n\n

\u901a\u8fc7 name \u5b9a\u4e49 class<\/h3>\n\n\n\n
<template>
  <button @click=\"flag = !flag\">click<\/button>
  <transition  name=\"xx\">
    <div v-if=\"flag\">xxx<\/div>
  <\/transition>
<\/template>
<script setup lang=\"ts\">
import {ref} from \"vue\";
const flag = ref(true);
<\/script>
<style scoped>
div{
  color: blue;
}
.xx-enter-from{
  color:red
}
.xx-enter-active{
  transition: all 5s;
}
.xx-enter-to{
  color: blue;
}
<\/style><\/code><\/pre>\n\n\n\n
xx-enter-from \u5f00\u59cb\u72b6\u6001<\/p>
xx-enter-active \u8fc7\u5ea6\u6548\u679c<\/p>
xx-enter-to \u7ed3\u675f\u72b6\u6001<\/p><\/blockquote>\n\n\n\n
\n\n\n\n
\u81ea\u5b9a\u4e49\u7c7b\u578b<\/h3>\n\n\n\n
v-enter-from\uff1a\u8fdb\u5165\u5f00\u59cb\u72b6\u6001<\/p>\n\n\n\n
v-enter-active\uff1a\u8fdb\u5165\u7684\u8fc7\u5ea6\u6548\u679c<\/p>\n\n\n\n
v-enter-to\uff1a\u8fdb\u5165\u7684\u7ed3\u675f\u72b6\u6001<\/p>\n\n\n\n
v-leave-from\uff1a\u79bb\u5f00\u7684\u5f00\u59cb\u72b6\u6001<\/p>\n\n\n\n
v-leave-active\uff1a\u79bb\u5f00\u7684\u8fc7\u5ea6\u6548\u679c<\/p>\n\n\n\n
v-leave-to\uff1a\u79bb\u5f00\u7684\u7ed3\u675f\u72b6\u6001<\/p>\n\n\n\n
<template>
  <transition v-enter-from=\"xx-enter-from\" v-enter-active=\"xx-enter-active\" v-enter-to=\"xx-enter-to\">
    <div v-if=\"flag\">xxx<\/div>
  <\/transition>
<\/template><\/code><\/pre>\n\n\n\n
\u52a8\u753b\u65f6\u95f4<\/h3>\n\n\n\n
<template>
  <transition name=\"xx\" :duration=\"{enter:500,leave=800}\">
    <div v-if=\"flag\">xxx<\/div>
  <\/transition>
<\/template>
\/\/ \u6216\u8005
<template>
  <transition name=\"xx\" :duration=\"500\">
    <div v-if=\"flag\">xxx<\/div>
  <\/transition>
<\/template><\/code><\/pre>\n\n\n\n
\u5217\u8868\u52a8\u753b<\/h2>\n\n\n\n
\u573a\u666f: \u53ef\u7528\u4e8e\u5bf9\u5217\u8868\u6e32\u67d3\u65f6\u5019\u65b0\u589e\u548c\u5220\u9664\u6570\u636e\u6dfb\u52a0\u52a8\u753b\u6548\u679c,\u53ef\u501f\u52a9\u7b2c\u4e09\u65b9\u52a8\u753b\u5e93\u5982 animate<\/p><\/blockquote>\n\n\n\n
<template>
  <transition-group name=\"xxx\">
    <ul>
      <li>111<\/li>
      <li>111<\/li>
    <\/ul>
  <\/transition-group>
<\/template><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
\u52a8\u753b\u5c5e\u6027 transition \u901a\u8fc7 name \u5b9a\u4e49 class xx-enter-from \u5f00\u59cb\u72b6\u6001 xx- […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[64],"tags":[],"class_list":["post-710","post","type-post","status-publish","format-standard","hentry","category-vue3"],"_links":{"self":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/710","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=710"}],"version-history":[{"count":1,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/710\/revisions"}],"predecessor-version":[{"id":711,"href":"https:\/\/gjweb.top\/index.php?rest_route=\/wp\/v2\/posts\/710\/revisions\/711"}],"wp:attachment":[{"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=710"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=710"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/gjweb.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=710"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}