I'm attempting to build an app with Ionic framework and Angular, but everything I try to make a smooth rotation animation on a div element isn't working properly. I need it to happen every time I click a button. The div element is separate from the button. I would like it to rotate 360 degrees and be repeatable.
I don't really have any code for you guys because I don't know how to do this! Any help would really be appreciated.
ng-click combined with CSS3 transform:rotate() from 0-360 degrees is one approach. Here is a working example:
http://play.ionic.io/app/7ab32156c805
css
#box {
margin: 20px;
width: 100px;
height: 100px;
background: #ccc;
}
.spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Spin Click Demo</h1>
</ion-header-bar>
<ion-content class="padding">
<div id="box" ng-class="divClass"></div>
<button class="button button-assertive" ng-click="divClass='spin'">Spin</button>
</ion-content>
</ion-pane>
</body>
</html>
js
angular.module('app', ['ionic']);
Related
doing a totally new website now. Haven't coded anything yet, just in the research stage. You know how an image will be on your computer or TV screen and it will start to grow bigger, not in a zoom way so much than in a way as if the image was coming towards you? What would you call that? I want to do the reverse, have it appear to be going toward the background on the screen from where I am, so the image will technically be getting smaller but will have kind of a 3D feel, as if it's getting farther away. Can anyone help me with what I should be looking for? Thanks!
Do you mean the effect of an responsive image?. Bootstrap makes use of the <img class="img-responsive" src="..."> to create responsive images. An example down below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Image</h2>
<p>The .img-responsive class makes the image scale nicely to the parent element (resize the browser window to see the effect):</p>
<img src="cinqueterre.jpg" class="img-responsive" alt="Cinque Terre" width="304" height="236">
</div>
</body>
</html>
trasnform: scale() does something like you're describing.
img {
max-width: 100%;
animation: scale 3s forwards;
transform-origin: 50% 0;
}
#keyframes scale {
to {
transform: scale(0);
}
}
<img src="http://cdn.thedailybeast.com/content/dailybeast/articles/2015/03/31/neil-degrasse-tyson-defends-scientology-and-the-bush-administration-s-science-record/jcr:content/image.img.2000.jpg/1432067001553.cached.jpg">
So I've recently started learning angularJS and wanted to understand how you do animations. I do have experience with jQuery and know how easy it is to implement animation with it however with angular...not so much.
Anyways the code looks like this:
html:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="js/controllers/indexCtrl.js"></script>
<link href="css/stylesheet.css" rel="stylesheet"/>
<link rel="css/animate.css" type="text/css" href="">
<title>Test</title>
</head>
<body ng-app="myApp" ng-controller="indexCtrl">
<div ng-repeat="i in vec">
<div class="test1"><h1>{{i}}</h1></div>
</div>
</body>
</html>
css:
html,body{
height: 100vh;
width: 100vw;
}
.test1{
width: 100vw;
height:10vh;
text-align:center;
background:red;
margin-bottom:1vh;
}
.test1.ng-enter{
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
So what I want to learn is how to fadeIn the repeated elements.
Peace.
I have a simple div element with red background and text on it. I wish this element will have a rotation and a skew. What happens as a result of my code is that the text is rotated, not the whole div element. How can I solve this?
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title></title>
<style>
#CssElement {
position:absolute;
top:250px;
left:250px;
width:200px;
height:200px;
background-color:red;
-webkit-transform:skew(-15deg,-30deg) rotate(180deg);
font-size:40px;
}
</style>
</head>
<body>
<div id="CssElement">Look how I am drawn</div>
</body>
</html>
This is how the element renders on screen:
If you don't want the text to be affected, add another element and apply inverse of the transform:
fiddle
<div id="CssElement"><span>Look how I am drawn</span></div>
CSS:
#CssElement span {
display: inline-block;
-webkit-transform: rotate(180deg) skew(15deg, 30deg);
transform: rotate(180deg) skew(15deg, 30deg);
}
Is there anyway that I can get my CSS only to go through the hover cycle once?
I need to keep the CSS intact and ADD a solution rather than completely changing it.
This maybe impossible, but I thought I'd ask.
CSS:
html .sensitive10, .sensitive5, .sensitive75, .sensitive15, .dp{
opacity: 1.0;
-webkit-transition: 5s all ease-in-out;
-webkit-transition-delay: 60s;
}
html:hover .dp{
opacity: 0.0;
-webkit-transition: all 5s ease-in-out;
-webkit-transition-delay: 16s;
}
#box{
height: 60px;
width: 60px;
background: #0DF;
}
HTML:
<html>
<body>
<div id="box" class="dp"></div>
<body>
</html>
Thanks
You can do this with jQuery .one() function, here is the reference:
http://api.jquery.com/one/
And the relevant example:
<html lang="en">
<head>
<meta charset="utf-8">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<div class="count">0</div>
<div class="target">Hover me</div>
<script>
var n = 0;
$(".target").one("mouseenter", function() {
$(".count").html(++n);
});
</script>
</body>
</html>
What you need is an onmouseout with a javascript function that would change your element's className to a css class that would not have a hover defined.
CSS
.element_with_hover{(...)}
.element_with_hover:hover{(...)}
.element_without_hover{(...)}
HTML
<div class="element_with_hover" id="hoverMe" onmouseout="javascript:removeHover('hoverMe');"></div>
JAVASCRIPT
function removeHover(elementId){
document.getElementById(elementId).className = "element_without_hover";
}
I have problem of display an hidden image when mouse over to an image by using CSS hover in Chrome and IE, but is working fine in Firefox.
Here is my link: https://www.solarisdutamas.com/fb/Elvieloon/welcome1.php
Here is my coding:
<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" media="screen" href="css-hover.css" />
</head>
<title>Elvie Loon</title>
<meta content="Professional Makeup Artist and Hair Stylist" name="description">
<style type="text/css">
.over .pic1 {
display:none;
visibility:hidden;
}
.over:hover .pic1 {
display:inline;
visibility:visible;
position:absolute;
top:250px;
left:100px;
z-index:11;
}
</style>
<body style="margin: 0px; width: 520px;">
<img src="landing-page.jpg" usemap ="#fly1map" />
<a class="over">
<map name="fly1map">
<area shape="poly" coords="387,339,433,365,416,376,425,395,371,393,391,369,387,339" href="">
</map>
<img src="pic-1.png" class="pic1">
</a>
</body>
</html>
Please help, thank you.
Instead of visibility try this...
#something:hover
{
opacity:1; //100% opacity
filter:alpha(opacity=100);
}
#something
{
opacity:0; //0% opacity
filter:alpha(opacity=0);
}
P.s Both lines inside the statement do the same thing, the bottom filter, is just IE's way of doing it.
The problem is that you can't hover over a hidden element (see Why isn't CSS visibility working?).
Two ideas...
1. You could use a technique with two images. In addition to your image, create a transparent image of the same size. Then flip them on the mouse hover.
<html>
<head>
</head>
<style type="text/css">
.flipimage { border:solid 1px pink; height:65px; width:65px; background-image:url("blank.jpg"); }
.flipimage:hover { border:solid 1px pink; height:65px; width:65px; background-image:url("truck.jpg"); }
</style>
<body style="margin: 0px; width: 520px;">
<div class="flipimage"></div>
</body>
</html>
2. This approach takes some additional markup, but essentially it places a <div> above the image. When you hover over the <div> it is moved below the image using the z-index.
<html>
<head>
<style type="text/css">
.placeholder{ background-color:pink; height:64px; width:64px; position:absolute; z-index:99; }
.placeholder:hover { z-index:-1; }
.over { position:absolute; z-index:1;}
</style>
</head>
<body style="margin: 0px; width: 520px;">
<div>
<div class="placeholder"></div>
<a class="over"><img src="vcard.jpg" class="pic1"></a>
</div>
</body>
</html>
There is a known bug with Chrome and IE8 related to :hover and z-index on absolute positioned elements.
Chrome: Issue 83533