Home Explore Help
Register Sign In
vuejs
/
vue
mirror of https://github.com/vuejs/vue.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

transition class can take format of "enter,leave"

Evan You 12 years ago
parent
9dc45ea9f6
commit
a7d184e44f
7 changed files with 43 additions and 16 deletions
Split View Show Diff Stats
  1. 1 1
      src/compiler.js
  2. 1 1
      src/directives/repeat.js
  3. 7 2
      src/transition.js
  4. 16 0
      src/utils.js
  5. 9 3
      test/functional/fixtures/transition.html
  6. 4 4
      test/functional/specs/transition.js
  7. 5 5
      test/unit/specs/transition.js

+ 1 - 1
src/compiler.js
View File 

@@ -259,7 +259,7 @@ CompilerProto.compile = function (node, root) {
 
 
             // CSS class transition
 
             if (transClass) {
 
-                node.sd_trans_class = transClass
 
+                node.sd_trans_class = utils.split(transClass)
 
             }
 
 
             // finally, only normal directives left!

+ 1 - 1
src/directives/repeat.js
View File 

@@ -159,7 +159,7 @@ module.exports = {
 
 
         // add transition info
 
         node.sd_trans = this.trans
 
-        node.sd_trans_class = this.transClass
 
+        node.sd_trans_class = utils.split(this.transClass)
 
 
         // append node into DOM first
 
         // so sd-if can get access to parentNode

+ 7 - 2
src/transition.js
View File 

@@ -54,7 +54,7 @@ transition.codes = codes
 
 /**
 
  *  Togggle a CSS class to trigger transition
 
  */
 
-function applyTransitionClass (el, stage, changeState, className) {
 
+function applyTransitionClass (el, stage, changeState, classes) {
 
 
     if (!endEvent) {
 
         changeState()
 
@@ -62,10 +62,13 @@ function applyTransitionClass (el, stage, changeState, className) {
 
     }
 
 
     var classList         = el.classList,
 
-        lastLeaveCallback = el.sd_trans_cb
 
+        lastLeaveCallback = el.sd_trans_cb,
 
+        className
 
 
     if (stage > 0) { // enter
 
 
+        className = classes[0]
 
+
 
         // cancel unfinished leave transition
 
         if (lastLeaveCallback) {
 
             el.removeEventListener(endEvent, lastLeaveCallback)
 
@@ -85,6 +88,8 @@ function applyTransitionClass (el, stage, changeState, className) {
 
 
     } else { // leave
 
 
+        className = classes[classes.length > 1 ? 1 : 0]
 
+
 
         // trigger hide transition
 
         classList.add(className)
 
         var onEnd = function (e) {

+ 16 - 0
src/utils.js
View File 

@@ -13,6 +13,13 @@ function makeHash () {
 
     return Object.create(null)
 
 }
 
 
+/**
 
+ *  trim for map
 
+ */
 
+function trim (str) {
 
+    return str.trim()
 
+}
 
+
 
 var utils = module.exports = {
 
 
     hash: makeHash,
 
@@ -47,6 +54,15 @@ var utils = module.exports = {
 
         })
 
     },
 
 
+    /**
 
+     *  split a transition class string into array
 
+     */
 
+    split: function (classString) {
 
+        if (classString) {
 
+            return classString.split(',').map(trim)
 
+        }
 
+    },
 
+
 
     /**
 
      *  Accurate type check
 
      *  internal use only, so no need to check for NaN

+ 9 - 3
test/functional/fixtures/transition.html
View File 

@@ -17,13 +17,19 @@
 
                 -moz-transition: all .2s ease;
 
                 -webkit-transition: all .2s ease;
 
             }
 
-            .test.shrink {
 
+            .test.enter, .test.leave {
 
                 height: 0;
 
                 padding-top: 0;
 
                 padding-bottom: 0;
 
                 border-top-width: 0;
 
                 border-bottom-width: 0;
 
             }
 
+            .test.enter {
 
+                background-color: #00f;
 
+            }
 
+            .test.leave {
 
+                background-color: #0f0;
 
+            }
 
         </style>
 
     </head>
 
     <body>
 
@@ -40,7 +46,7 @@
 
                 class="test"
 
                 sd-repeat="item:items"
 
                 sd-if="filter(item)"
 
-                sd-transition-class="shrink"
 
+                sd-transition-class="enter, leave"
 
                 sd-attr="data-id:item.a">
 
                 {{item.a}}
 
             </div>
 
@@ -48,7 +54,7 @@
 
                 class="test"
 
                 sd-repeat="item:items"
 
                 sd-show="filter(item)"
 
-                sd-transition-class="shrink"
 
+                sd-transition-class="enter, leave"
 
                 sd-attr="data-id:item.a">
 
                 {{item.a}}
 
             </div>

+ 4 - 4
test/functional/specs/transition.js
View File 

@@ -16,17 +16,17 @@ casper.test.begin('Transition', 23, function (test) {
 
     .thenClick('.button-1')
 
     .wait(minWait, function () {
 
         test.assertElementCount('.test', 4)
 
-        test.assertElementCount('.test.shrink', 2)
 
+        test.assertElementCount('.test.leave', 2)
 
     })
 
     .wait(transDuration, function () {
 
         test.assertElementCount('.test', 3)
 
-        test.assertElementCount('.test.shrink', 0)
 
+        test.assertElementCount('.test.leave', 0)
 
         test.assertNotVisible('.test[data-id="1"]')
 
     })
 
     .thenClick('.button-2')
 
     .wait(minWait, function () {
 
         test.assertElementCount('.test', 3)
 
-        test.assertElementCount('.test.shrink', 2)
 
+        test.assertElementCount('.test.leave', 2)
 
     })
 
     .wait(transDuration, function () {
 
         test.assertElementCount('.test', 2)
 
@@ -41,7 +41,7 @@ casper.test.begin('Transition', 23, function (test) {
 
     .thenClick('.pop')
 
     .wait(minWait, function () {
 
         test.assertElementCount('.test', 4)
 
-        test.assertElementCount('.test.shrink', 2)
 
+        test.assertElementCount('.test.leave', 2)
 
     })
 
     .wait(transDuration, function () {
 
         test.assertElementCount('.test', 2)

+ 5 - 5
test/unit/specs/transition.js
View File 

@@ -43,7 +43,7 @@ describe('UNIT: Transition', function () {
 
             var el = mockEl('css'),
 
                 c = mockChange(function () {
 
                     c.called = true
 
-                    assert.ok(el.classList.contains('test'))
 
+                    assert.ok(el.classList.contains('enter'))
 
                 }),
 
                 code,
 
                 cbCalled = false
 
@@ -65,7 +65,7 @@ describe('UNIT: Transition', function () {
 
             })
 
             
             it('should remove the class afterwards', function () {
 
-                assert.notOk(el.classList.contains('test'))
 
+                assert.notOk(el.classList.contains('enter'))
 
             })
 
 
             it('should return correct code', function () {
 
@@ -85,7 +85,7 @@ describe('UNIT: Transition', function () {
 
             })
 
 
             it('should add the class', function () {
 
-                assert.ok(el.classList.contains('test'))
 
+                assert.ok(el.classList.contains('leave'))
 
             })
 
 
             it('should call changeState on transitionend', function () {
 
@@ -102,7 +102,7 @@ describe('UNIT: Transition', function () {
 
             })
 
 
             it('should remove the class after called', function () {
 
-                assert.notOk(el.classList.contains('test'))
 
+                assert.notOk(el.classList.contains('leave'))
 
             })
 
 
             it('should return correct code', function () {
 
@@ -215,7 +215,7 @@ describe('UNIT: Transition', function () {
 
     function mockEl (type) {
 
         var el = document.createElement('div')
 
         if (type === 'css') {
 
-            el.sd_trans_class = 'test'
 
+            el.sd_trans_class = ['enter', 'leave']
 
         } else if (type === 'js') {
 
             el.sd_trans = 'test'
 
         }