CSS Transition not working when input in Javascript -

-

i read every thread , tried every possible solution , don't know missing!

i have div video_container_dc fade in when call in javascript.

the css:

#video_container_dc {     position: absolute;     width: 350px;     height: 198px;     top: 0px;     left: 376px;     opacity: 0;     /*visibility:hidden;*/     /*display:none;*/ } #video_container_dc.expandingvid {     -webkit-transition: 2s ease-out 1s;     -moz-transition: 2s ease-out 1s;     -o-transition: 2s ease-out 1s;     -ms-transition: 2s ease-out 1s;     transition: 2s ease-out 1s;     opacity:1;     /*visibility:visible;*/     /*display:block;*/ }

the javascript:

var expand_content; var vidcontainer; var expandtweens = [];  function expand_transition() {     expandtweens = [];     expand_content.classname = 'expanding';     vidcontainer.classname = 'expandingvid'; }  inits = function () {     expand_content = document.getelementbyid('expand_content_dc');     vidcontainer = document.getelementbyid('video_container_dc'); }

i tried tween function no avail:

//vidcontainer = document.getelementbyid('video_container_dc'); //document.getelementbyid( 'video_container_dc' ).classname += 'expandingvid'; //vidcontainer.classname += "expandingvid";  //vidcontainer.css("opacity", 0); //vidcontainer.offset(); //vidcontainer.css("transition", "opacity 1000ms ease-out").css("opacity", 1);

the html:
first run inits(); in html then:

<div id="video_container_dc">     <video id="video_dc" >         <source id="video_1_mp4_src_dc" type="video/mp4"/>     </video> </div>

it looks it's possible dom elements not exist on page @ time you're calling expand_transition. should make sure script waits run until page loaded, potentially using like:

window.addeventlistener('load', function() {     // code here }, false);

if you're doing this, if expand_transition function runs on page load, browser coalescing dom changes. feature provided browsers can make number of changes @ once, , appear on page in single repaint.

instead of calling expand_transition directly, consider trying instead (from onload handler):

settimeout(expand_transition, 0);

the artificial delay enough convince browser want apply layout changes before executing transition function.


Comments

Post a Comment

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

-
using jmockit 1.2 jar, trying mock string's length method getting unexpected invocation exception: failed: test java.lang.illegalstateexception: missing invocation mocked type @ point; please make sure such invocations appear after declaration of suitable mock field or parameter @ stringdemo.testa$1.<init>(testa.java:17) @ stringdemo.testa.test(testa.java:13) i using testng: @test public void test() throws exception { new expectations() { @mocked("length") string astring; { astring.length(); result = 2; } }; system.out.println(a.showa("test")); } } actual class a: public class { public static int showa(string str){ int a= str.length(); return a; } } this wrong way of recording expected results. shouldn't mock , record string's length() method, record showa() instead. here solution @suppresswarnings("unused...
Read more

What is the difference between data design and data model(ERD) -

-
i have google question , find answer in day. know, data design many many table have list column,and mark pk , fk. why er-diagram have find this? data design process of designing database. main output of data design detailed logical data model of database. some people data design includes of needed logical , physical design choices , physical storage parameters needed generate design in data definition language. technically, database analysis, database analysts (dbas) trained do. while person can both data design , database analysis, these 2 different tasks. data design models data. database analysis takes model , applies 1 or more database engines (relational, hierarchical, nosql). a logical data model 1 of main outputs of data design. data model represented entity relationship diagram, or er diagram.
Read more

ios - Can NSManagedObject conform to NSCoding -

-
i need transfer single object across device. right converting nsmanagedobject dictionary , archiving , sending nsdata. upon receiving unarchiving it. transfer nsmanagedobject archiving , unarchiving instead of creating intermediate data object. @interface test : nsmanagedobject<nscoding> @property (nonatomic, retain) nsstring * title; @end @implementation test @dynamic title; - (id)initwithcoder:(nscoder *)coder { self = [super init]; if (self) { self.title = [coder decodeobjectforkey:@"title"]; //<crash } return self; } - (void)encodewithcoder:(nscoder *)coder { [coder encodeobject:self.title forkey:@"title"]; } @end nsdata *archivedobjects = [nskeyedarchiver archiveddatawithrootobject:testobj]; nsdata *objectsdata = archivedobjects; if ([objectsdata length] > 0) { nsarray *objects = [nskeyedunarchiver unarchiveobjectwithdata:objectsdata]; } the problem above code is. crashes @ self.title in initwithcoder sa...
Read more