How to create opacity effect on webOS?


Tags: javascript,html,css,webos

Problem :

I have an html video element in my page :

<video id="myVideo" src = "./play.mp4" autoplay loop></video>

I am making it disappear on some action like this :

var vid = document.getElementById("myVideo");
vid.style.visibility = "hidden";

I can make it appear back again with

vid.style.visibility = "visible";

But I want the video to ease in smoothly how can I do this via javascript ?

I tried :

vid.style.transition   = "visibility 2s";
vid.style.visibility = "visible";

But it didn't work. Could anyone point my mistake ? (The webOS platform doesn't support jquery and the opacity css property)

I cannot use opacity :( --> Developer documentation : The opacity property is unapplicable on video elements.



Solution :

You can use css transition and rgba format with some javascript to add opacity animation without the css opacity property.

var hide = document.getElementById('tryh'),
    show = document.getElementById('trys'),
    foo  = document.getElementById('foo');

show.addEventListener('click', function () {
  foo.className = 'foo show';
});

hide.addEventListener('click', function () {
  foo.className = 'foo hide';
});
.foo {
  position: relative;
  background: rgba(0,0,0,0);
  transition: background-color 1s;
}

.hide {
  background-color: rgba(255,255,255,1);
}

.show {
  background-color: rgba(0,0,0,0);
}

.foo:before {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-color: inherit;
  content: ' ';
}
<div id='foo' class='foo'>
  <video id="video" src="./play.mp4" controls autoplay loop ></video>
</div>

<button id='trys'>Show</button>
<button id='tryh'>Hide</button>


    CSS Howto..

    How to align item to the very bottom within flexible box layout column?

    How can I make one item with its own class a different colour from others?

    How can I prevent overflow from a fieldset?

    How to shrink the width size hyperlink?

    How to get conditional css to work on Blogger/Blogspot?

    I applied CSS auto-resizing to image, now how do I push it to the background?

    how to add empty space between cells in tables?

    How to trigger onClick event properly

    How to Access local CSS file from within Alfresco Javascript?

    How to debug the different behavior of the same browser on the different platforms?

    How to get CSS table-cell to 100% for responsive design [closed]

    How to compile or convert sass / scss to css with node-sass (no Ruby)?

    How to implement min left/right in css

    How to avoid IE11 “slow” evaluation of CSS :invalid and :valid pseudo selectors

    How to position absolute in scrollable area? (Css)

    How to make a header that changes position (like Pinterest)

    Load More / Show Less issues using jquery

    how to use variables when setting CSS properties in Jquery?

    How to inherit CSS using Less?

    How to animate an image as it grows from the width of a container to the full viewport width?

    How do I vertically and horizontally center all these elements?

    How to customize in javascript?

    How to change background color of readonly textbox in css

    How to alter CSS properties using PHP based on a conditional

    How can I fade in new HTML elements with CSS [duplicate]

    How to make images to go out of the div when width is over the max-width?

    How can display these elements in line?

    How can I create an overlay that stays in DOM as opacity 0 but doesn't prevent content from being clickable?

    How to prevent a closing tag from being removed?

    How to create Curved & Overlapping Menu Tabs in CSS