Translate(built-ins/transition-demos)

Author: medaminefh

src/guide/built-ins/transition-demos/Basic.vue

@@ -4,9 +4,9 @@ let show = $ref(true)
 
 <template>
   <div class="demo">
-    <button @click="show = !show">Toggle Fade</button>
+    <button @click="show = !show">تبديل التلاشي</button>
     <Transition name="fade">
-      <p style="margin-top: 20px" v-if="show">hello</p>
+      <p style="margin-top: 20px" v-if="show">مرحبا</p>
     </Transition>
   </div>
 </template>

src/guide/built-ins/transition-demos/BetweenElements.vue

@@ -6,17 +6,17 @@ let docState = $ref('saved')
 
 <template>
   <div class="demo transition-demo">
-    <span style="margin-right: 20px">Click to cycle through states:</span>
+    <span style="margin-right: 20px">انقر للتنقل بين الحالات:</span>
     <div class="btn-container">
       <Transition name="slide-up" :mode="mode">
         <button v-if="docState === 'saved'" @click="docState = 'edited'">
-          Edit
+          تعديل
         </button>
         <button v-else-if="docState === 'edited'" @click="docState = 'editing'">
-          Save
+          حفظ
         </button>
         <button v-else-if="docState === 'editing'" @click="docState = 'saved'">
-          Cancel
+          إلغاء
         </button>
       </Transition>
     </div>

src/guide/built-ins/transition-demos/CssAnimation.vue

@@ -4,10 +4,10 @@ let show = $ref(true)
 
 <template>
   <div class="demo">
-    <button @click="show = !show">Toggle</button>
+    <button @click="show = !show">تبديل</button>
     <Transition name="bounce">
       <p v-if="show" style="margin-top: 20px; text-align: center">
-        Hello here is some bouncy text!
+        مرحبا هنا بعض النص النطاط!
       </p>
     </Transition>
   </div>

src/guide/built-ins/transition-demos/JsHooks.vue

@@ -40,7 +40,7 @@ function onLeave(el, done) {
 
 <template>
   <div class="demo">
-    <button @click="show = !show">Toggle</button>
+    <button @click="show = !show">تبديل</button>
 
     <Transition
       @before-enter="onBeforeEnter"

src/guide/built-ins/transition-demos/ListBasic.vue

@@ -19,8 +19,8 @@ function randomIndex() {
 
 <template>
   <div class="demo">
-    <button @click="add">Add at random index</button>
-    <button @click="remove">Remove at random index</button>
+    <button @click="add">أضف في مؤشر عشوائي</button>
+    <button @click="remove">فسخ في مؤشر عشوائي</button>
     <TransitionGroup name="list" tag="ul" style="margin-top: 20px">
       <li v-for="item in items" :key="item">
         {{ item }}

src/guide/built-ins/transition-demos/ListMove.vue

@@ -31,9 +31,9 @@ function shuffle(array) {
 
 <template>
   <div class="demo">
-    <button @click="add">Add</button>
-    <button @click="remove">Remove</button>
-    <button @click="shuffle(items)">Shuffle</button>
+    <button @click="add">أضف</button>
+    <button @click="remove">فسخ</button>
+    <button @click="shuffle(items)">خلط</button>
     <TransitionGroup name="list2" tag="ul" style="margin-top: 20px">
       <li class="list-item" v-for="item in items" :key="item">
         {{ item }}

src/guide/built-ins/transition-demos/NestedTransitions.vue

@@ -4,10 +4,10 @@ let show = $ref(true)
 
 <template>
   <div class="demo">
-    <button @click="show = !show" style="margin-bottom: 20px">Toggle</button>
+    <button @click="show = !show" style="margin-bottom: 20px">تبديل</button>
     <Transition duration="550" name="nested">
       <div v-if="show" class="transition-demo-outer">
-        <div class="transition-demo-inner">Hello</div>
+        <div class="transition-demo-inner">مرحبا</div>
       </div>
     </Transition>
   </div>

src/guide/built-ins/transition-demos/SlideFade.vue

@@ -4,9 +4,9 @@ let show = $ref(true)
 
 <template>
   <div class="demo">
-    <button @click="show = !show">Toggle Slide + Fade</button>
+    <button @click="show = !show">تبديل الإنزلاق + التلاشي</button>
     <Transition name="slide-fade">
-      <p style="margin-top: 20px" v-if="show">hello</p>
+      <p style="margin-top: 20px" v-if="show">مرحبا</p>
     </Transition>
   </div>
 </template>